Intro to Angular 2 @Sh_McK
Intro to Angular 2
@Sh_McK
Angular 1.x
Now
2009
Library for
Web DesignersFramework for
Web Developers
1.3 -> 1.4 -> 1.5 -> 1.6 -> 2.0
What do you think about ?
Angular 2The Future
Pop Quiz!What’s the difference between a
factory & Service?
In directives, when do you use the compile, link, or controller?
Easier to ReasonFewer concepts
Simplified DI
One-way data flow
Tree structure
Automatic Change detection
Easier to MaintainBetter stack traces
Improved testability
Style zones (Shadow DOM)
Pop Quiz!
What advantages does React have over angular?
Better PerformanceFaster
Memory Management
Lazy-loading
Server-side Rendering
Native Mobile Rendering
Service workers ?
Quick ExampleTodoMVC with Firebase
import {Component, View, bootstrap, NgFor, bind} from 'angular2/angular2';import {AngularFire, FirebaseArray} from 'firebase/angularfire';
@Component({selector: 'todo-app',appInjector: [AngularFire,bind(Firebase).toValue(new Firebase('https://webapi.firebaseio-demo.com/test'))
]})@View({
templateUrl: 'todo.html',directives: [NgFor]
})class TodoApp { … }
bootstrap(TodoApp);
Todo.TS / Todo.js
class TodoApp {todoService: FirebaseArray;todoEdit: any;todoFilter: Boolean;
constructor(sync: AngularFire) {this.todoService = sync.asArray();this.todoEdit = null;this.todoFilter = null;
}enterTodo($event, newTodo) {
if($event.which === 13) { // ENTER_KEYvar todoText = newTodo.value.trim();if (todoText) {
this.addTodo(todoText);newTodo.value = '';
}}
}…
}
Todo.TS / Todo.js
<h1>todos</h1><input
id="new-todo"placeholder="What needs to be done?"autofocus#newtodo(keyup)="enterTodo($event, newtodo)">
<li *ng-for="#todo of todoService.list">
<div class="view"[class.hidden]="(todoEdit == todo || todoFilter == todo.completed)">
<input class="toggle" type="checkbox"(click)="completeMe(todo)"[checked]="todo.completed">
<label (dblclick)="editTodo($event, todo)">{{todo.title}}</label><button class="destroy" (click)="deleteMe(todo)"></button>
</div> </li>
Todo.html
What to Study?Because the web isn’t waiting for you.
ES6 / TypeScriptImport / Export
Class
Template syntax
Web Components<Template>
Shadow DOM
Module LoaderWebpack
JSPM + System.js
Meteor
Online Study Groupwww.tryangular2.com
ResourcesWebpack-Starter
ES6-Starter
Plunker
Why Will Angular 2 Rock?
Twitter: @Sh_McK Kakao: Shawnmckay
What do you think about ?