Keynote: Angular2 Basic Short Notes

Angular2

Superheroic, non-opinionated Framework.
Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.
Despite the fact that, new 2.0 version of Angular is focused on ES6 standart and is Not compatible with the 1.4, it's definitely worth to use it.

Angular leverages ES 2015 standards and doesn't force you to stuck with one option.
You can use TypeScript, Dart or JavaScript to write your application.

I used Angular 1

Good to you, then you'll be really happy with new abilities ^_^.
You just have to go here Angular 1 to 2 Quick Ref and here Upgrading from 1.x.

Angular 2 Common Overview

• You do not need to care about Self-Invoking Functions anymore (because of ES6).
• You should not care about isolated scopes anymore (because of ES 2015 modules).
• Instead of old Controller & Directive all you need is @Component decorator.
• Angular Dependency Injection framework is simple, it allows u really enjoy Angular 2 automated dependency injection and to simplify application testing.
• There no filter (for performance reasons), but it's simply replaceable with pipe.
• Services are nothing more than a classes in Angular 2.
• You still can follow Angular "Backend-Less" approach through in-memory web api.
• You still has an ability to make "Transclusion" through ng-content.
• The Most of Built-in directives (NgIf, NgFor, etc.) remained (use through asterisk e.g. *ngFor).
• Data Binding to set properties of DOM elements became more fast & beautiful (remember the brackets).
• Angular 2 embraces Unidirectional data-flow, which gives us more predictable behavior & performance boost.

## Angular 2 Service ### Simple Service is just a Class I preferred to start from service, just because it's just a simple class: ```typescript import { PRODUCTS } from './mock-products'; export class ProductService { getProducts() { return PRODUCTS; } } ``` ### Service that uses another Service Service that uses another Service it's class with `@Injectable()` decoration to have injected dependency. Now let's bring automated dependency injection benefit via *constructor injection*: <pre data-line="5"><code class="language-typescript"> import { Injectable } from '@angular/core'; import { PRODUCTS } from './mock-products'; import { Logger } from '../logger.service'; @Injectable() export class ProductService { constructor(private logger: Logger) { } getProducts() { this.logger.log('Getting products ...') return PRODUCTS; } } </code></pre> *\*Note:* It's recommended to annotate every service class as `@Injectable()` in advance for consistency and to not forget annotation during adding dependencies in future. *\*Note:* It's also possible to mark dependencies as `@Optional()` if those are not mandatory, but then you should take care about null object references. ## Angular 2 Component What do i really love in Angular 2, it's that a component is basically also a simple class, but just with `@Component` decoration. ### Simple Component <pre data-line="3"><code class="language-typescript"> import { Component } from '@angular/core'; @Component({ selector: 'app-banana', template: `<h1>Hello Banana!</h1>` }) export class BananaComponent { } </code></pre> ### Component with Style <pre><code class="language-typescript"><!-- import { Component } from '@angular/core'; @Component({ selector: 'app-banana', template: `<h1 class="banana-title">Hello Banana!</h1>` styles: ['.banana-title {color: yellow}'] }) export class BananaComponent { } --></code></pre> ### Component with external template <pre data-line="5,6"><code class="language-typescript"> import { Component } from '@angular/core'; @Component({ selector: 'app-banana', templateUrl: 'app/components/banana.html', styleUrls: ['app/components/banana.css'] }) export class BananaComponent { } </code></pre> ### Component with Data <pre data-line="5,10"><code class="language-typescript"><!-- import { Component } from '@angular/core'; @Component({ selector: 'app-banana', template: `<h1>Hello {{title}}!</h1>` }) export class BananaComponent { title:string; constructor() { this.title = 'Banana'; } } --></code></pre> *\*Note:* Of course you could initialize title right in declaration like `title = 'Banana'`. ### Component that uses another Component <pre data-line="6,7"><code class="language-typescript"><!-- import { Component } from '@angular/core'; import { BananaComponent } from './banana.component'; @Component({ selector: 'my-app', template: `<app-banana></app-banana>`, directives: [BananaComponent] }) export class AppComponent { } --></code></pre> *\*Notice:* Now we have `directives: [BananaComponent]`. ### Component that listens the user Input We can pass data from parent to child via using `@Input()` aliases: <pre data-line="7,8,15"><code class="language-typescript"><!-- import { Component } from '@angular/core'; @Component({ selector: 'app-product-detail', template: `<div class="child"> <h2>This is {{title}}</h2> <div>Owner name: {{owner.name}}</div> <div>Description: <input [(ngModel)]="message"></div> <button (click)="onSave()">Save</button> </div>` }) export class ProductDetailComponent { message: string = 'Initial message'; onSave() { /*saving logic...*/ } } --></code></pre> *\*Notice:* * `message` is two-way binded with ngModel. * `onSave()` method invoked on each button click. ### Component that receives parameters from Parent We can pass data from parent to child via using `@Input()` aliases: <pre data-line="12,13"><code class="language-typescript"><!-- import { Component, Input } from "@angular/core"; @Component({ selector: 'app-product-detail', template: `<div class="child"> <h2>This is {{title}}</h2> <div>Owner name: {{owner.name}}</div> <div>Description: <input [(ngModel)]="message"></div> </div>` }) export class ProductDetailComponent { @Input("productName") title: string; @Input() owner: {name: string}; message: string = 'Initial message'; } --></code></pre> *\*Notice:* * we receive `productName`, but store it in `title` variable; * `owner` is an object; * `message` is two-way binded with ngModel. And Here how it's used in parent component: <pre data-line="6"><code class="language-typescript"><!-- import { Component } from '@angular/core'; import { ProductDetailComponent } from './product-detail.component'; @Component({ selector: 'my-app', template: `<app-product-detail [productName]="currentProduct" [owner]="customer"></app-product-detail>`, directives: [ProductDetailComponent] }) export class AppComponent { currentProduct: string = 'Banana'; customer: {name: string} = {name: 'John'}; } --></code></pre> *\*Notice:* * we have `currentProduct`, but pass it as `productName` argument; * `customer` is an object; ### Component that pass data back to Parent We can pass data back to parent via using `@Output()` aliases: <pre data-line="12,27"><code class="language-typescript"><!-- import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; @Component({ selector: 'app-product-detail', template: `<div class="child"> <h2>Product: {{title}}</h2> <div>Price: {{price}}</div> </div>` }) export class ProductDetailComponent implements OnInit { @Input("productName") title: string; @Output('last-price') lastPrice: EventEmitter<IPrice> = new EventEmitter(); price: number; ngOnInit() { setInterval(() => { this.generateLastPrice(); }, 5000); } private generateLastPrice() { let result:IPrice= { timestamp: Date.now(), price: (100*Math.random()).toFixed(2) }; this.price = result.price; this.lastPrice.emit(price); } } --></code></pre> *\*Notice:* * `ProductDetailComponent` implements `OnInit`; * we start calculate the price since `ngOnInit`and renew it each 5 seconds; * our binding listens for `(last-price)` target-event and invokes `priceChangeHandler(event: IPrice)` whenewer `emit` is invoked. * `@Input` and `@output` properties alternatively could be specified in `@Component` annotation as list of `inputs` and `outputs` accordingly. And Here how it's used in parent component: <pre data-line="6,7,14"><code class="language-typescript"><!-- import { Component } from '@angular/core'; import { ProductDetailComponent } from './product-detail.component'; @Component({ selector: 'my-app', template: `<app-product-detail [productName]="currentProduct" (last-price)="priceChangeHandler($event)"></app-product-detail> <p>Price received: {{stockSymbol}} {{price | currency:'USD':true}}</p>`, directives: [ProductDetailComponent] }) export class AppComponent { currentProduct: string = 'Banana'; price: number; priceChangeHandler(event: IPrice) { this.price = event.lastPrice; } } --></code></pre> *\*Notice:* * we have `lastPrice` type strict emitter in child; * we receive emitted `result` object from child into our `priceChangeHandler` * we format stored price using the pipe operator (`|`) before displaying it. ### Component that inherits another Component <pre><code class="language-typescript"> import { Component } from "@angular/core"; @Component({ selector: 'app-product-detail', template: `product-detail.html` }) export class ProductDetailComponent { /*logic...*/ } </code></pre> And here is our descendant: <pre data-line="7"><code class="language-typescript"> import { Component } from "@angular/core"; @Component({ selector: 'app-custom-product-detail', template: `custom-product-detail.html` }) export class CustomProductDetailComponent { constructor ( /*dependencies...*/ ) { super( /*some of dependencies...*/ ); } } </code></pre> *\*Note:* If `@Component` annotation in base component bothers you, u always can convert it into simple abstract class and reuse the code base. *\*Note:* You also can use composition over inheritance and apply different behaviors onto your component or to use decorator pattern. ---- ## see Also * [Boost your TypeScript code quality with TSLint](http://bloomlab.blogspot.com.ee/2016/06/boost-your-typescript-code-quality-with.html) * [Angular - Template Syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#) * [Angular - API](https://angular.io/docs/ts/latest/api/)