Embed Size (px)
Citation preview
Ross Dederer, May 2016
Migrate from Angular 1 to Angular 2
about: me Ross Dederer, Developer Relations Wijmo specializes in JavaScript UI controls
o Grids, FlexSheet o Charts, Financial Charts, Gauges o Inputs, etco 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
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
about: Silverlight App
about: HTML5 AngularJS App
Angular 2: introduction Modular
o Smaller Core
Moderno 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
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
IntelliSense Feature of TypeScript
o Not exclusive to Angular 2
Familiar experience for experienced C# developers Self-documentation
Angular 1 vs. Angular 2: Visual Studio
Angular 1
JavaScript
Angular 2
TypeScript
Angular 2: first impressions from Wijmo devs Better Encapsulation – Modular Design
o Components
Angular 2 seems more natural than Angular 1o Delegates tasks to JS interpreter. o Leverages HTML5 more efficiently
Typescript Integration o IntelliSense
No $scope or $watch
Diagram from angular.io
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{ }
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
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
Metadata and Decorators Decorators
o @component
Metadata o Selector o TemplateUrl o Directives o Providers
The template, metadata, and component together describe the view.
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”
Data Services Application
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/
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
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
Bootstrapping - Launching ApplicationFrom bootstrap.ts :
import {class} from './app';
bootstrap(class.component);
Inside default.htm:
System.import(“/src/class.component”);
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';
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
Constructorthis.customers = new wijmo.collections.CollectionView();
Porting the view: html New Template Syntax Updated Bindings Need to add placeholder in default.html
In Angular 1: In Angular 2 :
Porting the view: wijmo controlsAngular 2 code:
New Binding syntax New Template syntax Local Variables
Migrating the ‘Controller’
export module portingFromSL { @Component({ selector: 'app', templateUrl: 'src/app.html', })export class App {
// business logic }
Default.htm Selector
Everything is a component!
Think of a component as a single unit which is a model, a controller, and a view.
Live Demo
