# Angular Quick Guide

* Angular written in Typescript. AngularJS written in Javascript
* [Reference](https://angular.io)
* [Tutorial](https://www.simplilearn.com./tutorials/angular-tutorial)
* Using  *Jasmine* + *Karma* testing framework
* [Spring security + angular](https://spring.io/guides/tutorials/spring-security-and-angular-js/)

## Installation

```shell
$ 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

```sh
// 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)

```shell
$ ng new routing-app --routing
```

* Create each routes components

```shell
$ cd routing-app

$ ng generate component first

$ ng generate component second
```

* update `AppRoutingMOdule`  `app-routing.module.ts`

```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`

```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](https://www.techniediaries.com/routing-angular-router/)

```shell
$ ng generate service data

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

```

* generated `data.service.ts`

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

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

  constructor() { }
}
```

## Add pipes

* [Reference](https://www.simplilearn.com./tutorials/angular-tutorial)
* data transformation interface

```shell
$ ng g pipe <nameofthepipe>

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

* generated `my-pipe.pipe.ts`

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

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

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

}
```