This document provides an introduction and overview of Angular 2. It discusses how Angular 2 is easier to reason about and maintain than Angular 1, with fewer concepts, simplified dependency injection, one-way data binding, and other improvements. It also highlights better performance in Angular 2 with features like faster rendering, lazy loading, and server-side rendering. The document ends by demonstrating a quick example of a Todo application built with Angular 2 and Firebase.

1. IntrotoAngular 2
@Sh_McK

2. Angular 1.x
Now

3. 2009
Libraryfor
Web Designers
Framework for
Web Developers

4. 1.3-> 1.4-> 1.5-> 1.6-> 2.0

5. What do you think about ?

6. Angular 2
The Future

7. Pop Quiz!
What’s the difference between a
factory & Service?
In directives, whendo you use the
compile, link,or controller?

8. Easier to Reason
Fewerconcepts
Simplified DI
One-way data flow
Tree structure
Automatic Change detection

9. Easier to Maintain
Better stack traces
Improved testability
Style zones(Shadow DOM)

10. Pop Quiz!
What advantages does React have
over angular?

11. BetterPerformance
Faster
Memory Management
Lazy-loading
Server-side Rendering
Native Mobile Rendering
Service workers ?

12. Quick Example
TodoMVC with Firebase

13. 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

14. 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_KEY
var todoText = newTodo.value.trim();
if (todoText) {
this.addTodo(todoText);
newTodo.value = '';
}
}
}
…
}
Todo.TS/ Todo.js

15. <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

16. What toStudy?
Because the web isn’t waiting for you.

17. ES6 /TypeScript
Import /Export
Class
Template syntax

18. WebComponents
<Template>
Shadow DOM

19. Module Loader
Webpack
JSPM+System.js
Meteor

20. Online Study Group
www.tryangular2.com

21. Resources
Webpack-Starter
ES6-Starter
Plunker
Why Will Angular 2 Rock?
Twitter: @Sh_McK Kakao: Shawnmckay

22. What do you think about ?