Angular 2
+
TypeScript
=
Title Text
Building Blocks
ng2
OUR PARTNERS
Agenda:
- What is Angular 2
- Advantages of Angular 2
- Main Building Blocks
- Simple Code Snippets
- Recap :)
mobile and desktop
mobile and
desktop
Advantages :
- SPEED AND PERFORMANCE
- SIMPLE AND EXPRESSIVE
- LEGACY BROWSER SUPPORT
- CROSS PLATFORM SUPPORT
- FLEXIBLE DEVELOPMENT
- EASY MIGRATION FROM 1 TO 2
- NEW COOL ROUTER
- DEPENDENCY INJECTION
- OTHERS [UNDER DEVELOPMENT]
Quick ng2 Architecture Overview
Component
- Main building block
- Top level app components
- Containing many children sub-components
- Containing encapsulated View + Class
- Event handling and updates to the View
hello-world.ts
import {Component} from 'angular2/core';
@Component({
selector: 'hello-world',
template: `<h1>Hello, {{target}}!</h1>`,
styles: [`
h1 {
font-size: 1.2em;
}
`]
})
export class HelloWorldCmp {
target: string;
constructor() {
this.target = 'World';
}
}ES2015 Modules & Typescript
- Building modular applications
- A file containing js code
- No more IIFEs & callbacks for modules
- import
- export
Directives
- Visualisation instructions
- Adding dynamic template content
- Structural - add or remove existing DOM element
- Attribute - change the visualisation of already existing DOM element
- Built-in directives - *ngFor, *ngIf, *ngSwitch, etc.
highlight.directive.ts
import {Renderer, Directive, ElementRef, Input} from 'angular2/core';
@Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef, renderer: Renderer) {
renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
}
}Services
- A class with exact purpose
- Contains business and application logic
- HTTP requests and server communication
- Components consume services
- Components depend on services they consume
name_lists.service.ts
export class NameList {
names = ['Dijkstra', 'Knuth', 'Turing', 'Hopper'];
get(): string[] {
return this.names;
}
add(value: string): void {
this.names.push(value);
}
}
Dependecy Injection
- It's a coding pattern in which a class receives its dependencies from external sources rather than creating them itself.
- An isolated component
- Decoupled code and testing boost
- Injector - The injector object that exposes APIs to us to create instances of dependencies.
- Provider - A provider is like a recipe that tells the injector how to create an instance of a dependency. A provider takes a token and maps that to a factory function that creates an object.
- Dependency - A dependency is the type of the created object
di.ts
import {provide, Injector, Injectable} from 'angular2/core';
class Shampoo {}
@Injectable()
class CosmeticShop {
constructor(private shampoo: Shampoo) {
}
}
let injector = Injector.resolveAndCreate([
provide(Shampoo, {useValue: new Shampoo()}),
CosmeticShop
]);
injector.get(CosmeticShop);Pipes
- A service that filters data
- Transofrms values in wanted output for better UX
- Chaning pipes in potentially useful combinations
- New pipes that give us special functionality, async pipe
- Built-in pipes - DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, etc.
- Custom Pipe example
letterTransform.pipe.ts
home.ts
import {Pipe} from 'angular2/core';
@Pipe({
name: 'myCustomPipe'
})
export class myCustomPipe {
transform(): string {
// letter formatting
}
}
import {Component} from 'angular2/core';
import {myCustomPipe} from './myCustomPipe.pipe';
@Component({
selector: 'demo-app',
template: '<p>{{longText | myCustomPipe}}</p>',
pipes: [myCustomPipe]
})
export class App {
constructor() {
let longText = 'BANANA-BAANANABANANABANANA-BANANA';
}
}
Basic Routing
- Router is an optional service that is not part of ng 2 core
- <script src="node_modules/angular2/bundles/router.dev.js"></script>
- Navigation from one view to another
- Watching for user interactions with the view
- Searching for RouteDefinition for presenting certain view
- RouterOutlet directive - where to display the loaded component
app.ts
import {Component} from 'angular2/core';
import {
RouteConfig,
ROUTER_DIRECTIVES
} from 'angular2/router';
import {HomeCmp} from '../../home/components/home';
import {AboutCmp} from '../../about/components/about';
@Component({
selector: 'app',
templateUrl: './app.html',
styleUrls: ['./app.css'],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/', component: HomeCmp, name: 'Home'},
{path: '/about', component: AboutCmp, name: 'About'},
])
export class AppCmp {}
app.html
<section>
<nav>
<a [routerLink]="['/Home']">What?</a>
<a [routerLink]="['/About']">About</a>
</nav>
<router-outlet></router-outlet>
</section>
Recap :)
Thank you :)
Angular 2
Angular 2 - Building Blocks
By Elena Gancheva
Angular 2 - Building Blocks
- 3,236
