Angular 2

Michael C. Kang
Angular 2 - Framework

 JavaScript Framework
 Used to Build Mobile and Desktop Web Applications
 SPA Framework – Single Page Application
 Currently in Beta (http://angular.io)
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
Angular 2 – Features and Benefits
 View Encapsulation with Shadow DOM (
https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation)
 Isolated DOM
 Isolated CSS
 Simple, Expressive, and Consistent Data Binding Syntax
 [input], (output), #localvar
 Form Validation Support (
https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.2sz64we3k)
 Built-in Validators (required, minLength, maxLength, etc)
 Custom Validators
 Asynchronous Validators
 Dependency Injection (
http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html)
 Hierarchical Injectors
 Testability (
https://medium.com/google-developer-experts/angular-2-unit-testing-with-jasmine-defe20421584#.uvjk
bm7yq
)
Angular 2 vs Angular 1

 Upgrade Path (https://angular.io/docs/ts/latest/guide/upgrade.html)

 Comparison (http://blog.jhades.org/introduction-to-angular2-the-main-goals/)
 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
Angular 2 vs Angular 1
 Yes, it’s faster…

Figure from http://angularjs-v2.com/

Angular 2 vs Other Libraries

 Yes, it’s gaining popularity

 Community Support (http://sotagtrends.com/)
 Angular2 vs Ember vs Knockout vs ExtJS
Angular 2

 Framework written in TypeScript

 Your App can use ES5, ES2015 (ES6), or TypeScript
ES2015 (ES6)

 Next version of JavaScript supported by all major browsers

ES2015 Features

 Full Feature List: https://github.com/lukehoban/es6features

 Classes
 Arrow Functions
 Promises
 Modules
 Module Loaders
 Template Strings
 Map, Set
 etc
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
Shims and Polyfills

 Shim
 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
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>
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

Angular 2 Hello World App!

 Pnkr Demo - Hello World!

 http://plnkr.co/edit/SE0M7ZcLp8ceGlRAoGZQ?p=preview
 CDN used to include scripts (https://cdnjs.com) and http://pixelbits.net for
IE shims
Angular 2 – Script Dependencies
 Overview of Script Dependencies: https://daveceddia.com/angular-2-dependencies-overview/

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!
Angular 2 – Try It Yourself

 Template Interpolation
 i.e. {{ title }}
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) { … }
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
Angular 2 – Try It Yourself

 Dependency Injection
 Application Injector
 Component Injector
Components

 Break UI into re-usable pieces

 Component Definition
 Annotations (Component, View)
 Controller Class

 View
Controller

 The backing of the component’s view

Template Syntax

 Three main features

 Local Variables  #localvar
 Event Handlers  (click)  Output Bindings
 Property Bindings  [innerText]  Input Bindings
Template Syntax
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”
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
Input Bindings

 Input Bindings  Data flows from parent to child

Output Bindings

 Output Bindings  Events flows from child to parent

Two-Way Model Binding

 <div [(ngModel)]=“todoText” />

 Equivalent to:
 <div (ngModelChange)=“todoText=$event” [ngModel]=“todoText” />
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)
Angular 2 – Try It Yourself

 Component Output Event Bindings

 i.e. @Output nameChange:EventEmitter<string> 
(nameChange)=“onNameChange()”
 Component Input Model Bindings
 i.e. @Input name:String  [name]=“person.name”
 Component Two-Way Model Bindings:
 i.e. [(name)] =“person.name”
 Sub-Components
 directives: [subComponent1, subComponent2,etc]
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)
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
Questions?