all-in-one/angular

Angular Quick Guide

• Angular written in Typescript. AngularJS written in Javascript
• Reference
• Tutorial
• Using Jasmine + Karma testing framework
• Spring security + angular

Installation

$ npm i -g @angular-cli

// create app
$ ng new my-app

// run app
$ cd my-app
$ ng serve [--open]   // --open : automatically open browser @ localhost:4200

Coding

// create component
$ ng generate component <component-name>

// generates 
// component file: <component-name>.component.ts
// template file : <component-name>.component.html
// CSS file : <component-name>.component.css
// testing file : <component-name>.component.spec.ts

Routing (Multi Page app)

$ ng new routing-app --routing

• Create each routes components

$ cd routing-app

$ ng generate component first

$ ng generate component second

• update AppRoutingMOdule app-routing.module.ts

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

• add links on landing html page app.component.html

<h1>Angular Router App</h1>
  <nav>
    <ul>
      <li><a routerLink="/first-component" routerLinkActive="active">First Component</a></li>
      <li><a routerLink="/second-component" routerLinkActive="active">Second Component</a></li>
    </ul>
  </nav>
  <router-outlet></router-outlet>

Add Service for getting data

• Reference

$ ng generate service data

// this generates
// src/app/data.service.ts
// src/app/data.service.spec.ts

• generated data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
}

Add pipes

• Reference
• data transformation interface

$ ng g pipe <nameofthepipe>

// generates
// my-pipe.pipe.spec.ts
// my-pipe.pipe.ts

• generated my-pipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
export class MyPipePipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}