Wednesday, August 21, 2019

MEAN - MongoDB, Express, Angular, NodeJS

MEAN Development

M - MongoDB - https://www.mongodb.com/
E -  Express - https://expressjs.com/
A - Angular - https://angular.io/
N - NodeJS - https://nodejs.org/en/

IDE of Choice - https://code.visualstudio.com/

Extensions of Choice for VS Code

- Angular Essentials
- Material Icon Theme

Open VSCODE

Ctrl + Shift + `  Opens Terminal Window

Be sure you have installed NodeJS and Angular

Command for Angular is npm install -g @angular/cli

Use the Terminal to Navigate to cd c:/Users/UserName/Source/Repos

Run

https://angular.io/cli/new  ng-new app-name


... More to come

Angular = Components and Components = Uncoupled and resuability

Always work from the ./src/app

Create new folders following the naming structure

+-app
 - app.component.css
 - app.component.html
 - app.component.ts
 - app.component.spec.ts
 - app.module.ts

For new components create new subfolders in the app folder

+-app
 |
 |
 +-my-dog
 - app.my-dog.component.css
 - app.my-dog.component.html
 - app.my-dog.component.ts
 - app.my-dog.component.spec.ts

Update the app.module.ts 


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/my-dog.component';

@NgModule({
declarations: [
AppComponent,
MyDog
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }