You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.5 KiB
Markdown
137 lines
2.5 KiB
Markdown
# 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;
|
|
}
|
|
|
|
}
|
|
```
|
|
|
|
|
|
|