Angular is a pattern, it is a way to design applications
UI components separated from business logic
- Very declarative templates
- Databind those templates with methods and objects
- Dependency injection
Performance improvements
Better declarative APIs
New template systems
- rendering in the server
Renderers
- non DOM renders means web workers
- other renderers like NativeScript
Powered By Giphy
"data": [
{
type: "gif",
id: "FiGiRei2ICzzG",
slug: "funny-cat-FiGiRei2ICzzG",
url: "http://giphy.com/gifs/funny-cat-FiGiRei2ICzzG",
...
images: {
fixed_height: {
url: "http://media2.giphy.com/media/FiGiRei2ICzzG/200.gif",
width: "568",
height: "200",
size: "460622",
},
fixed_height_still: {
url: "http://media2.giphy.com/media/FiGiRei2ICzzG/200_s.gif",
width: "568",
height: "200"
},
fixed_height_downsampled: {
...
Giffy-List
Search
Trending
App
GiphyAPI
Components
Services
Http
Routing
npm install -g angular-cli
ng new giffy
ng serve
Composite objects into tree structures to represent part-whole hierarchies.
Design Patterns, GoF
An application will always have a root component
that contains all other components.
Every Angular 2 application will have a component tree.
Giffy-List
Search
Trending
App
Components
An Angular class responsible for exposing data to a View and handling most of the view’s display and user-interaction logic.
Components contain all the information needed to instantiate them:
export class AppExampleComponent {
constructor() { }
}
Based on the ES2015
module standard
import { Component } from '@angular/core';
@Component({
})
export class AppExampleComponent {
constructor() { }
}
@Component decorator is a function that adds metadata to a class.
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
})
export class AppExampleComponent {
constructor() { }
}
Selector associates an Angular component with a DOM element
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: 'app-example.component.html',
styleUrls: ['app-example.component.css'],
})
export class AppExampleComponent {
constructor() { }
}
Information on how to render itself
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: 'app-example.component.html',
styleUrls: ['app-example.component.css'],
directives: [],
providers: [],
...
})
export class AppExampleComponent {
constructor() { }
}
Component configures dependency injection
import { Component, Input, Ouput } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: 'app-example.component.html',
styleUrls: ['app-example.component.css'],
directives: [],
providers: [],
...
})
export class AppExampleComponent {
constructor() { }
@Input() propertyName; // property bindings
@Output() eventName; // event bindings
}
Public API of input and output properties
Angular 2 removes the need for many built-in directives (e.g. ng-click, ng-focus, ng-blur, ng-keyup, ...)
aprox 20 of them are gone.
There are only 6 built-in directives:
NgClass, NgStyle, NgIf, NgSwitch, NgFor & NgModel
Just attach to the DOM event
One-way property bindings bind a DOM property to a value or expression
<img [src]="fixedHeight.url" />
<div [hidden]="!isVisible" > .. </div>
<p [class.specialClass]="isSpecial"> .. </p>
<span [style.color]="textColor"> .. </span>
Event bindings are used to execute an expression when an event occurs
The binding sends information about the event, including data values, through an event object named $event.
<div (click)="activate()"> .. </div>
<input (blur)="save()" />
<img (mouseover)="sort($event)" />
Simplify with ngModel directive, it can be used to create a "two-way" binding
<input [(ngModel)]="user.name">
Property and event binding
<input [value]="user.name"
(input)="user.name=$event.target.value">
import { Injectable } from '@angular/core';
@Injectable()
export class GiphyAPIService {
constructor() { }
getTrending() {
// ..
}
}
We can create services using ES2015 classes and adding @Injectable()
import { GiphyAPIService } from './localPath';
@Component({
selector: ..,
..
providers: [GiphyAPIService],
..
})
export class ExampleComponent {
..
}
Components configure dependency injection in providers array.
Available for all children.
When a component depends on a service, you do not create this service yourself. Request it on the constructor, and angular will provide you one.
// with DI
constructor(public giphyAPI: GiphyAPIService) { } // GOOD
// without DI
constructor() {
this.giphyAPI = new GiphyAPIService(); // BAD
}
Angular 2 has one API for injecting dependencies into components.
Http is an injectable class with methods to perform http requests.
import {Http} from '@angular/http';
import {Injectable} from '@angular/core';
@Injectable()
class GiphyAPIService {
constructor(private http: Http) {
}
}
Http returns an Observable which will emit a single response it's received.
class GiphyAPIService {
...
getContacts() {
return this.http.get('http://api.gihpy.com/trending/..')
.map((res) => { return res.json(); })
.map((data) => { return data.items; });
}
}
Giffy-List
App
GiphyAPI
Components
Service
Giffy-List
Search
Trending
App
Components
Each Route Definition has a path, a component, and an optional name.
import { provideRouter, RouterConfig } from '@angular/router';
const routes: RouterConfig = [
{ path: 'users', component: UserListComponent },
{ path: 'user/:id', component: UserDetailComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];
RC10
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from './search/search.component';
import { TrendingComponent } from './trending/trending.component';
const appRoutes: Routes = [
{
path: 'search', component: SearchComponent
},
{
path: 'trending', component: TrendingComponent
},
{
path: '**', component: SearchComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Final Release
Bootstrap our application with an array of routes using the provideRouter function.
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [
appRouterProviders
])
RC10
Now it is added into the root NgModule.
import { routing } from './app.routes';
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
HttpModule,
routing
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Final Release
<router- outlet> is placeholder that Angular dynamically fills based on the application's route
<nav>
<a routerLink="/search" routerLinkActive="active">Search</a>
<a routerLink="/trending" routerLinkActive="active">Trending</a>
</nav>
<router-outlet></router-outlet>
Components, are the most important.
Component blocks build applications in trees.
Angular 2 offers a simplified API.