1. Angular 2
Michael C. Kang

2. Angular 2 - Framework JavaScript Framework
Used to Build Mobile and Desktop Web Applications
SPA Framework – Single Page Application
Currently in Beta (

3. Angular 2 – Features and Benefits
Over 5x Faster than Angular 1
Efficient Change Detection
Simple, Expressive, and Consistent Template Syntax
Cross Platform
Flexible Choices for Development
ES5, ES2015 (ES6), TypeScript, Dart
Comprehensive Support for Routing (similar to Angular1)
Dependency Injection
Legacy Browser Support (i.e. IE9+, Android 4.1+)
Animation Support
Internationalization and Accessibility

4. Angular 2 – Features and Benefits
View Encapsulation with Shadow DOM ( dom-angular-2-view-encapsulation)
Isolated DOM
Isolated CSS
Simple, Expressive, and Consistent Data Binding Syntax
[input], (output), #localvar
Form Validation Support 9b26f73fcb81#.2sz64we3k)
Built-in Validators (required, minLength, maxLength, etc)
Custom Validators
Asynchronous Validators
Dependency Injection ( injection-in-angular-2.html)
Hierarchical Injectors
Testability ( jasmine-defe #.uvjkbm7yq)

5. Angular 2 vs Angular 1
Upgrade Path (
Comparison (
More Efficient Change Detection Strategy
Improved Dependency Injection
Observables (Angular2) vs Promises (Angular1)
Easier to Learn (fewer concepts)
No more $scope
No need for $apply to trigger change detection (Angular 2 uses zones)
Every component in Angular 2 has isolated scope (no more separate concepts for inherited, isolated, child scopes)
No more compile/link phases
No more jqLite

6. Angular 2 vs Angular 1 Yes, it’s faster…
Figure from

7. Angular 2 vs Other Libraries
Yes, it’s gaining popularity
Community Support (
Angular2 vs Ember vs Knockout vs ExtJS

8. Angular 2 Framework written in TypeScript
Your App can use ES5, ES2015 (ES6), or TypeScript

9. ES2015 (ES6)
Next version of JavaScript supported by all major browsers

10. ES2015 Features
Full Feature List:
Classes
Arrow Functions
Promises
Modules
Module Loaders
Template Strings
Map, Set
etc

11. TypeScript Superset of Javascript
All JavaScript is valid TypeScript but not Vice Versa
TypeScript = JavaScript + Types = ES5 + Language Features
Classes, Generics, Interfaces, Enumerations, Namespaces, etc
Benefits
Static typing
Compile-time type checking
IDE support

12. Shims and Polyfills Shim Polyfill
Makes browsers compliant with existing standards
Fix mistakes in the API
Polyfill
Makes browsers compliant with standards of tomorrow
Implement missing features from future standards

13. Angular 2 Not all browsers fully support ES2015 standards
es6-shim script is available as an NPM package: npm install es6-shim
Allows you to write ES6 JavaScript and run it on non-compliant browsers
To use, just include the script:
<script src="node_modules/es6-shim/es6-shim.min.js"></script>

14. TypeScript Transpiler
Transpilation – Process of compiling one language into another language
TypeScript Transpiler = Transpiles TypeScript into JavaScript (ES5/ES6)
Two ways to transpile TypeScript:
Client-side transpilation by the browser
Server-side transpilation on the server

15. Angular 2 Hello World App!
Pnkr Demo - Hello World!
CDN used to include scripts ( and for IE shims

16. Angular 2 – Script Dependencies
Overview of Script Dependencies:
1. es-6-shim.js
Shims for ES6 (ES2015) browser compatibility
2. shims_for_IE.js
Shims for IE compatibility (IE9+)
3. angular2-polyfills.js
Zone.js and Reflect-metadata.js
4. system.js
Universal Module Loader
5. typescript.js
Client-side transpilation of typescript to JavaScript
6. rx.js
Library for supporting observables (programming with asynchronous observable event streams)
7. angular.js
Angular2 library!

17. Angular 2 – Try It Yourself
Template Interpolation
i.e. {{ title }}

18. Dependency Injection
Ability to inject dependencies into Components without needing to know
Sub-dependencies
How sub-dependencies are created
You can inject different kinds of dependencies
Factories  provide(Engine, {useFactory: () => { return function() { return… } })
Services  provide(Engine, {useClass: OtherEngine})
Values  provide(String, {useValue: 'Hello World'})
provide() maps a token to a configuration object. The token can either be a type or a string.
Dependencies are injected into the component’s constructor
i.e. constructor(todoService: ToDoService) { … }

19. Hierarchical Injectors
There are two types of injectors
1. Component Injector
2. Application Injector
Dependencies are resolved by searching up the inheritance chain
Child Injector  Parent Injector  Application Injector

20. Angular 2 – Try It Yourself
Dependency Injection
Application Injector
Component Injector

21. Components Break UI into re-usable pieces Component Definition View
Annotations (Component, View)
Controller Class
View

22. Controller
The backing of the component’s view

23. Template Syntax Three main features Local Variables  #localvar
Event Handlers  (click)  Output Bindings
Property Bindings  [innerText]  Input Bindings

24. Template Syntax

25. Angular 2 – Try It Yourself
Local Template Variables
Access to DOM element
Output Event binding to native DOM events
(keyup.enter)=“addTodo()”
Input Model Binding to native DOM or CSS properties
[style.background-color]=“todoText==‘’?’aqua’:’’
Two-Way model binding
[(ngModel)]=“todoText”

26. Change Detection Each component has its own change detector
Input and Output bindings are unidirectional
@Input()  Downwards
@Output()  Upwards
Acyclic Directional Graph leads to more efficient change detection
One digest cycle to detect changes

27. Input Bindings
Input Bindings  Data flows from parent to child

28. Output Bindings
Output Bindings  Events flows from child to parent

29. Two-Way Model Binding <div [(ngModel)]=“todoText” />
Equivalent to:
<div (ngModelChange)=“todoText=$event” [ngModel]=“todoText” />

30. Consistent Binding Syntax
Input Bindings
Native DOM Properties (i.e. style, width, height, etc)
Custom Component Properties
Output Bindings
Native DOM Events (i.e. click, keyup, mousemove, etc)
Custom Component Events (i.e. EventEmitter)

31. Angular 2 – Try It Yourself
Component Output Event Bindings
nameChange:EventEmitter<string>  (nameChange)=“onNameChange()”
Component Input Model Bindings
name:String  [name]=“person.name”
Component Two-Way Model Bindings:
i.e. [(name)] =“person.name”
Sub-Components
directives: [subComponent1, subComponent2,etc]

32. There’s more…
Pipes (i.e. {{ money | currency }}, {{ name | uppercase }}
Routes
Form Validation
Control Validators
Validation flags
Dirty
Pristine
Error
Valid
Observables (with RxJS) vs Promises
Web Services (Http)

33. Demo – To Do App Create ToDo Model Create ToDoService
Register TodoService with Application Injector
Inject ToDoService, and display the Todo list
Add an input field, when <enter> is pressed, add a Todo item
Add a remove button, when the button is clicked, remove the Todo item
Add a checkbox to toggle the completed state of the Todo item
When a Todo item is completed, strike-through the text so that it appears done
Add a link to clear all the completed items (clear completed)
Add a label “[X of Y complete]”
Hide the label if there are 0 items

34. Questions?