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#.uvjkbm7yq)

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

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 View 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?