Embed Size (px)
Citation preview
Ross Dederer
Angular 2
about: me Ross Dederer Developer Relations of Wijmo
We sell JavaScript UI controlso Gridso Chatso Inputs, etc
Always researching new frameworks
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
Real world sample
Angular 2 introduction Modular
o Smaller Core
Moderno Evergreen browsers using ECMA 6
Component Based TypeScript
o Transpiling
Documentation has two tracks Google will continue developing Angular 1.x
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
From angular.io
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
Transpilation Source to source compilation
o Creates a map file
Why is it needed?o Modern browsers cant understand TS
Built into Visual Studio
IntelliSense
Feature of TypeScript o Not exclusive to Angular 2
C# developers utilize it heavily
Self documentation Self documentation
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';
Component Controls patch of screen – View
Contains our class that interacts with the viewo Via api of properties and methods.
Each Component has a companion Template “Code-behind” for components View Angular creates updates and destroyes components
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
Metadata and Decorators Decorators @component @view
MetaData Selector TemplateURL
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”
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/
The Silverlight App
Wijmo Controls used Wijmo.core Wijmo.grid Wijmo.input
o Input numbero Input dateo Combo box picker
Binding to all available control properties Two-way binding to properties Event Bindings Bindings for ngFor
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
Bootstrapping - Launching ApplicationFrom 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”);
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
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
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();
Porting the View *ngFor
In Angular 1Ng-click=“someEvent()” In Angular 2 (click)=“OnSave()”
<div *ngFor=“#qh of QueryResources, #index =index”> {{index}} {{qh.table}} </div>
In Angular 1Ng-click=“someEvent()” In Angular 2 (click)=“OnSave()”
<div *ngFor=“#qh of QueryResources, #index =index”> {{index}} {{qh.table}} </div>
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">
Migrating the ‘Controller’export module portingFromSL {
@Component({
selector: 'app',
})
@View({
templateUrl: 'src/app.html',
directives: [ ]
})
export class App {
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.
Live Demo
Thank You
