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 ?