Embed Size (px)
Citation preview
One framework.
In general
PerformanceTypeScriptImproved DISimplified structureReactivity
2009June 13
2012September 22
2014September 14
2016
the beginning Angular 1released
Angular 2announced
Angular 2released
Architecture
TypeScript
TypeScript
class Car { model: string;
constructor( carModel: string, private condition: string ) { this.model = carModel; }
info(): string { return this.model + " is " + this.condition; }}
let vazCar = new Car('VAZ', 'broken');
JS
var Car = (function () { function Car(carModel, condition) { this.condition = condition; this.model = carModel; }
Car.prototype.info = function () { return this.model + " is " + this.condition; };
return Car;}());
var vazCar = new Car('VAZ', 'broken');
index.html
<html>
<head>...
</head>
<body> <todo-app>Loading… </todo-app></body>
</html>
main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';import {AppComponent} from './app.component';
bootstrap(AppComponent);
Todo Main Files
app.component.html
<nav class="ui attached menu"> <div class="ui container"> <div class="header item"> <h1>{{ title }}</h1> </div> </div></nav>
<div class="ui text container"> <todos></todos></div>
app.component.ts
import { Component } from '@angular/core';
import { TodoService } from './shared/todo.service';import { TodosComponent } from 'todos.component';
@Component({ selector: 'todo-app', templateUrl: './app/app.component.html', styleUrls: ['./app/app.component.css'], directives: [TodosComponent], providers: [TodoService]})export class AppComponent { title: string; constructor() { this.title = 'Angular 2Do'; }}
App Component
todos.component.html
<todo-form (created)="onTodoCreated($event)"></todo-form><todo-list [todos]="todos" (deleted)="onTodoDeleted($event)"></todo-list>
todos.component.ts
import { Component, OnInit } from '@angular/core';import { TodoService } from 'todo.service';import { TodoFormComponent } from 'todo-form.component';import { TodoListComponent } from 'todo-list.component';
@Component({selector: 'todos',templateUrl: 'todos.component.html',directives:[TodoFormComponent,TodoListComponent]})export class TodosComponent implements OnInit { todos: ITodo[]; constructor(private todoService: TodoService){ this.todos = []; }
ngOnInit() { this.todoService.getTodos() .then(todos => this.todos = todos); }
onTodoCreated(todo: ITodo): void { this.todoService.addTodo(todo) .then(todo => this.todos.push(todo));}
onTodoDeleted(todo: ITodo): void { ...}
}
Todos Component
todo-form.component.html
<div class="ui segment form"> <div class="input">
<input type="text" #titleInput (keyup.enter)="create(titleInput.value);">
<button (click)="create(titleInput.value)"> Add </button>
</div></div>
todo-form.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { Todo } from '../../shared/todo.model';
@Component({ selector: 'todo-form', templateUrl: 'todo-form.component.html'})export class TodoFormComponent { @Output() created: EventEmitter<Todo>; constructor() { this.created = new EventEmitter<Todo>(); } create(title: string) { let todo = new Todo(title); this.created.emit(todo); }}
Form Component
todo-list.component.html
<div *ngIf="todos.length > 0">
<todo-item *ngFor="let todo of todos" [todo]="todo" (deleted)="onTodoDeleted($event)"></todo-item>
</div>
todo-list.component.ts
import { Component, Input, Output, EventEmitter} from '@angular/core';import { ITodo } from 'todo.model';import { TodoItemComponent } from 'todo-item.component';
@Component({ selector: 'todo-list', templateUrl: 'todo-list.component.html', directives: [TodoItemComponent]})
export class TodoListComponent implements OnInit { @Input() todos: ITodo[]; @Output() deleted: EventEmitter<ITodo>;
constructor() { this.deleted = new EventEmitter<ITodo>(); }
onTodoDeleted(todo: ITodo): void { this.deleted.emit(todo); }}
Todo List Component
todo-item.component.html
<div class="ui checkbox"> <input type="checkbox"> <label> {{ todo.title }} </label></div>
<button type="button" (click)="delete()"></button>
todo-item.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';import { Todo } from '../../shared/todo.model';
@Component({ selector: 'todo-item', templateUrl: 'todo-item.component.html'})export class TodoItemComponent { @Input() todo: Todo; @Output() deleted: EventEmitter<Todo>;
constructor() { this.deleted = new EventEmitter<Todo>(); }
delete() { this.deleted.emit(this.todo); }}
Todo Item Component
addTodo(todo: ITodo): Promise<ITodo> { let jsonData = JSON.stringify(todo); return this.http .post('api/todos', jsonData) .toPromise() .then(res => res.json().data); }
deleteTodo(todo: ITodo): Promise<ITodo> { let url = `api/todos/${todo.id}`; return this.http.delete(url) .toPromise() .then(res => todo); }}
todo.service.ts
import { Injectable } from '@angular/core';import { Http } from '@angular/http';import 'rxjs/add/operator/toPromise';
import { ITodo } from './todo.model';
@Injectable()export class TodoService { constructor(private http: Http) {}
getTodos(): Promise<ITodo[]> { return this.http.get('api/todos') .toPromise() .then(res => res.json().data); }
Todo Service
Angular 2 React
Type framework view library
Language / Syntax TypeScript / Angular-specific syntax
ES6 / JSX
DOM regular virtual
Performance good better
Templating html+specific syntax in or out of component
in component
Reactive yes If you want
Debugging good/unobvious sometimes good
Isomorphic yes yes
Angular 2 vs React
Angular 2 React
Mobile dev nativescript-angular, Ionic react-native, Ionic
Docs tools ESDoc, JSDoc ESDoc, JSDoc
Tests tools TestBed, Jasmine Jest, Enzyme
Migrating bad good
Angular 2 vs React
Stackoverflow GitHub
Angular 2 React
350 contributors 839 contributors
5865 commits 7413 commits
811 issues 483 issues
4524 forks 9297 forks
tag questions
angular2 22 843
reactjs 25 722
redux 3 739
react+ 42 416
Popularity
● A global immutable application state
● Unidirectional data-flow
● Changes to state are made in pure functions, or reducers
Redux
ng2-redux
Useful links
Angular official guide
Angular2 articles from core team member
Change Detection in Angular 2
Angular 2: Intro to Redux
Reactivity
Observables in Angular 2
