Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Migrating an application from Angular 1 to Angular 2


Published on

Learn how to make the jump to Angular 2 with Wijmo’s JavaScript UI controls!
With the recent release of the Angular 2 Beta, you’re probably asking if it’s worth it to make the jump from Angular 1. During this talk, we’ll share some tips and tricks on migration, as well as concepts that we learned along the way when migrating from Angular 1 to Angular 2. Wijmo has been developing controls in Angular 1 for quite some time now, and migrating our controls to the new Angular 2 beta was a pretty straightforward process.
You’ll learn:
Introduction to TypeScript and Angular 2.0 beta
The process of converting a Microsoft MVVM-featured application (the Microsoft DataServices QuickStart sample) from Angular 1.x to Angular 2.0, including:
How to convert business logic from JavaScript to the more C#-like TypeScript language
About the component and companion template role syntax using plain HTML and Wijmo controls (including Angular 2 FlexGrid and Input controls)
Additional tips and tricks to enhance your experience in Visual Studio

Published in: Technology
  • Be the first to comment

Migrating an application from Angular 1 to Angular 2

  1. 1. Ross Dederer, May 2016 Migrate from Angular 1 to Angular 2
  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. 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. 4. about: Silverlight App
  5. 5. about: HTML5 AngularJS App
  6. 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. 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. 8. IntelliSense  Feature of TypeScript o Not exclusive to Angular 2  Familiar experience for experienced C# developers  Self-documentation
  9. 9. Angular 1 vs. Angular 2: Visual Studio Angular 1 JavaScript Angular 2 TypeScript
  10. 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. 11. Diagram from
  12. 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. 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. 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. 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. 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. 17. Data Services Application
  18. 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:
  19. 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. 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. 21. Bootstrapping - Launching Application From bootstrap.ts : import {class} from './app'; bootstrap(class.component); Inside default.htm: System.import(“/src/class.component”);
  22. 22. Porting the Model  We luckily will use the same model/Datasource o JSON coming from service can serve as model. private _svcUrl: string = '';
  23. 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. 24. Porting the view: html  New Template Syntax  Updated Bindings  Need to add placeholder in default.html In Angular 1: In Angular 2 :
  25. 25. Porting the view: wijmo controls Angular 2 code:  New Binding syntax  New Template syntax  Local Variables
  26. 26. Migrating the ‘Controller’ export module portingFromSL { @Component({ selector: 'app', templateUrl: 'src/app.html', }) export class App { // business logic }
  27. 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. 28. Live Demo
  29. 29. Conclusion  Read more at: o o  Contact me at