Download to read offline
![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](https://image.slidesharecdn.com/angular2todoreact-161102210551/85/Angular2-Quick-overview-with-2do-app-example-6-320.jpg)
![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](https://image.slidesharecdn.com/angular2todoreact-161102210551/85/Angular2-Quick-overview-with-2do-app-example-7-320.jpg)
![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](https://image.slidesharecdn.com/angular2todoreact-161102210551/85/Angular2-Quick-overview-with-2do-app-example-9-320.jpg)
![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](https://image.slidesharecdn.com/angular2todoreact-161102210551/85/Angular2-Quick-overview-with-2do-app-example-11-320.jpg)
More Related Content
Similar to Angular2: Quick overview with 2do app example
Angular2: Quick overview with 2do app example
- 1.
- 2. In general Performance TypeScript Improved DI Simplifiedstructure Reactivity 2009 June 13 2012 September 22 2014 September 14 2016 the beginning Angular 1 released Angular 2 announced Angular 2 released
- 3.
- 4. 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');
- 5. 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
- 6. app.component.html <nav class="ui attachedmenu"> <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
- 7. 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
- 8. todo-form.component.html <div class="ui segmentform"> <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
- 9. 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
- 10. todo-item.component.html <div class="ui checkbox"> <inputtype="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
- 11. 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
- 12. Angular 2 React Typeframework 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
- 13. Angular 2 React Mobiledev 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
- 14. Stackoverflow GitHub Angular 2React 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
- 15. ● A globalimmutable application state ● Unidirectional data-flow ● Changes to state are made in pure functions, or reducers Redux ng2-redux
- 16. Useful links Angular officialguide Angular2 articles from core team member Change Detection in Angular 2 Angular 2: Intro to Redux Reactivity Observables in Angular 2