#1.6 Angular 2 Basics

1. Start installing the angular cli:

$ sudo npm install -g angular-cli

2. in the app directory, run the below command in order to create the angular "app" folder, which is the source for the frontend angular app:

$ ng new angular-src
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

installing ng2
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.json
  create angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.

Installed packages for tooling via npm.
Project 'angular-src' successfully created.


3. in the newly created folder "angular-src" edit the file "angular-cli.json" as below:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",

change "outDir" from "dist" to "../public" which is an existing directory in the root app directory;

4. Some comments on files that are generated by Angular:

a) angular-src/src/app/app.module.ts -> declaration of all modules / components / services:
components -> declaration section;
modules -> imports section;
services -> providers section;

b) angular-src/src/app/app.component.ts -> has a decorator for the component, allowing to add metadata e.g. selector (html tag), template (html), style (css) and main class for the component;


5. Components and services can be generated by angular-cli e.g.: create a separated directory for components (angular-src/src/app/components) and, once into the components directory, run the following command:

$ ng g component <component_name>

where g stands for "generate";

e.g.: create component home:
$ ng g component home
As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release,
which will only support Node 6.9 and greater. This package will be officially deprecated
shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

installing component
  create src/app/components/home/home.component.css
  create src/app/components/home/home.component.html
  create src/app/components/home/home.component.spec.ts
  create src/app/components/home/home.component.ts
  update src/app/app.module.ts

At the same time, the app modules file is updated with the newly created component;


6. Router definition:

a) in angular-src/src/app/app.module.ts -> import RouterModule and Routes from '@angular/router';
import {RouterModule, Routes} from '@angular/router';

b) include the router modules in the imports section;
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)

]

c) define appRoutes object array with all the routes, e.g.:
const appRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "register", component: RegisterComponent },
  { path: "login", component: LoginComponent },
  { path: "dashboard", component: DashboardComponent },
  { path: "profile", component: ProfileComponent }
]

d) change app.component.html in order to add the router tag:
<h1>
  {{title}}
</h1>
<app-navbar></app-navbar>
<div class="container">
    <router-outlet></router-outlet>
</div>


7. Create the navbar component and the corresponding links to home, register and login:
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MEAN App</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/']">Home</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/login']">Login</a></li>
        <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['/register']">Register</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>



References:
- https://youtu.be/zrViDpWiNVE?list=PLillGF-RfqbZMNtaOXJQiDebNXjVapWPZ
- http://getbootstrap.com/examples/starter-template/
- https://bootswatch.com/