Cacher is the code snippet organizer for pro developers

Angular

You need to set up your development environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

Install the Angular CLI globally
npm install -g @angular/cli

Get 1 back to main directory 
Ctrl + c

Get Node Version 
Node -v

Get npm version
Npm -v

Get angular version 
Ng -v

Create a new App
ng new MYAPP

Start Angular App
After getting in app directory
cd MYAPP
ng serve --open / ng serve -o

Create new component 
Ng g component COMPONENT NAME or ng g c COMPONENT NAME

Install Bootstrap module
Ref - https://stackoverflow.com/questions/48028505/bootstrap-4-not-working-with-angular-2-app?rq=1


1.npm install bootstrap@4.0.0-beta.2 popper.js jquery --save
2.Open .angular-cli.json file and update script section as follows:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],


Uninstall Node ‘Module’ 
npm uninstall MODULE NAME (bootstrap)

Remove Node ‘Module’
Npm remove MODULE NAME (bootstrap)

Routing
Ref - 
https://codecraft.tv/courses/angular/routing/route-configuration/#_routes_routermodule
https://www.youtube.com/watch?v=hZzc1vL0_Cs&list=PLo4twE8XBOPydlpBrQY9yyD-fv0zy0C-K&index=18


a)Create some components through Angular CLI

Ng generate component home
Ng generate component about
Ng generate component services
Ng generate component contact

 
Import RouterModule by adding below line in “app.module.ts” file.
import {Routes, RouterModule} from "@angular/router";



b)Route Configuration
The mapping of URLs to Components we want displayed on the page is done via something called a Route Configuration, at it’s core it’s just an array which we can define like so:

In “app.module.ts” 

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'services', component: ServicesComponent },
{ path: 'contact', component: ContactComponent },
];

c)We then install these routes into our application by importing RouterModule.forRoot(routes) into our NgModule, like so:

@NgModule({
	imports: [
	  .
	  .
		RouterModule.forRoot(routes, {useHash: true})
	]
	.
	.
	.
})
class AppModule { }


d)We need to add a directive called router-outlet somewhere in our template HTML. This directive tells Angular where it should insert each of those components in the route, we’ll add ours to the AppComponent, like so:

<h1>
{{title}}
</h1>

<router-outlet></router-outlet>