This document discusses migrating from Angular 1 to Angular 2. It provides an overview of Angular 2 including its modular and component-based architecture. It also discusses TypeScript and how it is used with Angular 2. The document then walks through migrating a sample Silverlight application to an equivalent Angular 2 application, covering converting the viewmodel to a component and porting the view. It emphasizes keeping a similar MVVM pattern and discusses new Angular 2 concepts like templates, metadata and bindings.

1. Ross Dederer, May 2016
Migrate from Angular 1 to Angular 2

2. about: me
 Ross Dederer, Developer Relations
 Wijmo specializes in JavaScript UI controls
o Grids, FlexSheet
o Charts, Financial Charts, Gauges
o Inputs, etc
o OLAP
 Supported AngularJS since the early days and now offer full Angular 2 support.
 Wijmo Team always researching new frameworks
o React and Ember coming soon

3. about: discussion
 What is Angular 2?
 TypeScript
o Introduction
o IntelliSense
 Angular 2: 8 Building Blocks
 Data Services Quick Start – Migration Story: Silverlight to HTML5
 Migrating View to Angular 2 template
 Migrating ViewModel to Angular 2

4. about: Silverlight App

5. about: HTML5 AngularJS App

6. Angular 2: introduction
 Modular
o Smaller Core
 Modern
o Evergreen browsers using ECMA 6
o Legacy Browsers supported
 Component-Based
 Developed using TypeScript
 Documentation has two tracks
 Google will continue developing Angular 1.x
o Wijmo will continue to support it

7. TypeScript: introduction
 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.
 Type Safety
 Find errors at design time

8. IntelliSense
 Feature of TypeScript
o Not exclusive to Angular 2
 Familiar experience for experienced C# developers
 Self-documentation

9. Angular 1 vs. Angular 2: Visual Studio
Angular 1
JavaScript
Angular 2
TypeScript

10. Angular 2: first impressions from Wijmo devs
 Better Encapsulation – Modular Design
o Components
 Angular 2 seems more natural than Angular 1
o Delegates tasks to JS interpreter.
o Leverages HTML5 more efficiently
 Typescript Integration
o IntelliSense
 No $scope or $watch

11. Diagram from angular.io

12. Module
 Application is a collection of Modules
 Angular provides us built-in modules
 Dedicated to single purpose
 Expose “things” – classes, functions, values
o Other modules import these “things”
import {PortingFromSL} from './app';
import {Component} from 'angular2/core';
export class PortingFromSL{ }

13. Component
 Define a module as component by attaching Meta Data to plain old TS class
 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 destroys components

14. Templating
 Components templateUrl contains component Template
 A form of HTML (not an HTML Form)
 Introduces new syntax
o *ngIf , *ngFor
 Angular manages the component and its view (template)
 All HTML is valid Template Synatx

15. Metadata and Decorators
 Decorators
o @component
 Metadata
o Selector
o TemplateUrl
o Directives
o Providers
 The template, metadata, and component together describe the view.

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

17. Data Services Application

18. Data Services Quick Start Application
 Loading data into Wijmo 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 – Grid’s inputs
 Live Demo: http://demos.wijmo.com/5/Angular/PortingFromSL/PortingFromSL/

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 component 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. Migration from Angular 1 to Angular 2
 Convert JavaScript to TypeScript
o Not required but I recommend it
 Keep familiar MVVM development pattern
 Porting the ViewModel — Component
o No controller?
o No $scope?
 Porting the View
o New attribute syntax

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

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

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: html
 New Template Syntax
 Updated Bindings
 Need to add placeholder in default.html
In Angular 1: In Angular 2 :

25. Porting the view: wijmo controls
Angular 2 code:
 New Binding syntax
 New Template syntax
 Local Variables

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

27. Default.htm
Selector
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
 Read more at:
o www.wijmo.com/angular2
o Angular.io
 Contact me at ross.dederer@grapecity.com