This document discusses Angular 2 and summarizes Ross Dederer's presentation on migrating an application from Angular 1 to Angular 2. Some key points covered include: - Angular 2 is more modular, modern, component-based and uses TypeScript. - Components provide better encapsulation and Angular 2 is simpler and more performant than Angular 1. - Migrating involves converting code to TypeScript, keeping the MVVM pattern, and porting the viewmodel/component and view. - The presentation demonstrates migrating a sample application that uses Wijmo controls from Angular 1 to Angular 2.

1. Ross Dederer
Angular 2

2. about: me
 Ross Dederer
 Developer Relations of Wijmo
 We sell JavaScript UI controls
o Grids
o Chats
o Inputs, etc
 Always researching new frameworks

3. about: discussion
 What is Angular 2 – sharing experiences
 TypeScript
o Introduction
o Comparison to JavaScript
 Data Services Quick Start Application
 Type Safety
 Data Binding
 Migrating View to Angular 2 template

4. Real world sample

5. Angular 2 introduction
 Modular
o Smaller Core
 Modern
o Evergreen browsers using ECMA 6
 Component Based
 TypeScript
o Transpiling
 Documentation has two tracks
 Google will continue developing Angular 1.x

6. Angular 2 – first impressions
 Better Encapsulation – Components
 Better Performance – fast initial loads, server side pre –rendering, faster change
detection
 Angular 2 is actually simplier than Angular 1
o Delegates tasks to JS interpretor.
o Leverages HTML5 more efficiently
 Typescript Integration

7. From angular.io

8. TypeScript
 TypeScript was created by Microsoft ( FOSS )
 Google is fully adopting TypeScript for Angular 2 development
 Superset of JavaScript that compiles to plain JS
o Any Browser, any host, any OS
 Offers classes, modules, and interfaces
 Object Oriented with Classes etc
 Open Source
 Find errors at design time

9. Transpilation
 Source to source compilation
o Creates a map file
 Why is it needed?
o Modern browsers cant understand TS
 Built into Visual Studio

10. IntelliSense
 Feature of TypeScript
o Not exclusive to Angular 2
 C# developers utilize it heavily
 Self documentation
 Self documentation

11. Module
 Application is a collection of Modules
 Optional – but recommended
o Need to us TypeScript ( ES2015 )
 Angular provides us built in modules
export class PortingFromSL{
}
import {PortingFromSL} from
'./app';
import {Component,View} from
'angular2/core';

12. Component
 Controls patch of screen – View
 Contains our class that interacts with the view
o Via api of properties and methods.
 Each Component has a companion Template
 “Code-behind” for components View
 Angular creates updates and destroyes components

13. Templating
 Components View contains component Template
 A form of HTML ( not a HTML Form )
 Angular manages the component and its view ( template )
 All HTML is valid Template Synatx

14. Metadata and Decorators
Decorators
 @component
 @view
MetaData
 Selector
 TemplateURL

15. Data Binding
 Interpolation {{ }}
 Template Expressions [property]=“expression”
o Produces a value
 Template Statements (event)=“statement”
o Responds to event
 Two-way Data Binding [(target)] = “expression”

16. Data Services QuickStart Application
 Loading Data into CollectionView
o Sort, filter, group
 Managing Hierarchical data to reflect current state
o Master Detail Relationships
 Binding data to Wijmo Controls
o Line of business application template
 Live Demo: http://demos.wijmo.com/5/Angular/PortingFromSL/PortingFromSL/


17. The Silverlight App

18. Wijmo Controls used
 Wijmo.core
 Wijmo.grid
 Wijmo.input
o Input number
o Input date
o Combo box picker
 Binding to all available control properties
 Two-way binding to properties
 Event Bindings
 Bindings for ngFor

19. Application Structure - New things
 In Ng 1, we needed to create a new app and give it a controller to handle all of
the business logic.
o No more controllers in Ng 2
 In Ng 2, we will organize our app inside a module that we will call PortingFromSL
o We will leverage the benefits of TypeScript here
 In Ng 2, we will move all of our markup and templating sits in app.html
 In Ng 2, we need to introduce a root component loader

20. Bootstrapping - Launching Application
From bootstrap.ts
 import {class} from './app';
 bootstrap(class.component);
Inside default.htm
 System.import(“/src/class.component”);
Inside default.htm
 System.import(“/src/class.component”);

21. Migration from Angular 1 to Angular 2
 Convert JavaScript to TypeScript
 Keep familiar MVVM development pattern
 Porting the ViewModel - Component
o No controller?
o No $scope?
 Porting the View
o New attribute syntax

22. Porting the Model
 We luckily will use the same model/Datasource
o JSON coming from service can serve as model.
private _svcUrl: string = 'http://services.odata.org/Northwind/Northwind.svc';
Made my life really easy

23. Porting the ViewModel
 CollectionView objects for Customers, Orders, Details
 Load some data using AJAX
 Ng 2 More closely related to SL than NG1
Class App
customers: wijmo.collections.CollectionView; // or any
Constructor
this.customers = new wijmo.collections.CollectionView();

24. Porting the View
 *ngFor
In Angular 1
Ng-
click=“someEvent()”
In Angular 2
(click)=“OnSave()”
<div *ngFor=“#qh of QueryResources, #index =index”> {{index}} {{qh.table}}
</div>
In Angular 1
Ng-
click=“someEvent()”
In Angular 2
(click)=“OnSave()”
<div *ngFor=“#qh of QueryResources, #index =index”> {{index}} {{qh.table}}
</div>

25. Porting the View - Wijmo
 Data-binding
<wj-input-number [required]="false"
[(value)]="currentItem.Freight">
</wj-input-number>
<wj-flex-grid #flex class="grid" [itemsSource]="details">

26. Migrating the ‘Controller’
export module portingFromSL {
@Component({
selector: 'app',
})
@View({
templateUrl: 'src/app.html',
directives: [ ]
})
export class App {

27. Default.htm
<body>
<app></app>
<body>
Everything is a component
Think of a component as a single unit which is a model, a controller, and a view.

28. Live Demo

29. Conclusion
 www.wijmo.com
 Angular.io
 Ross.dederer@grapecity.com

30. Thank You