Presented at FITC Toronto 2016
See details at www.fitc.ca
AngularJS was originally created in 2009 as an end-to-end solution for web designers wanting to build simple web apps. Over the last 6 years it has evolved into a component based MVC framework targeted at JavaScript developers. To maintain backward compatibility, Angular has had to hold onto many deprecated concepts. This has caused some of Angular’s APIs to be complex and easy to misuse. Angular 2 is a complete rewrite of Angular 1 which eliminates the outdated concepts and takes full advantage of modern web standards like ES6, TypeScript, and Web Components.
In this session you’ll learn which Angular 1 features to avoid and how to write an Angular 1 app that will be easy to migrate into Angular 2. We’ll go through the process of refactoring an Angular 1 app to prep it for migration. Then Rob will demonstrate how to incrementally migrate to Angular 2. You’ll come away from this session with a better understanding of what Angular 2 has to offer and how to start taking advantage of it.
Objective
To make the migration from Angular 1 to Angular 2 as painless as possible
Target Audience
Anyone using Angular 1 or interested in learning Angular 2.
Assumed Audience Knowledge
Some experience with JavaScript and Angular 1
Five Things Audience Members Will Learn
How to write an Angular 1 app that will be easy to migrate
Using TypeScript, ES6 modules, and the component router with Angular 1
The benefits of Angular 2
How to run Angular 1 and 2 in the same app
How to migrate an Angular 1 app to Angular 2
2. Why use Angular 2
● Takes advantage of modern web standards
○ ES6
○ TypeScript
○ Web Components
○ Observables
○ Module Loaders
○ ZoneJS
● Removes many unnecessary concepts from Angular 1
● Performance
3. What is ng-upgrade?
● Lets you run angular 1 and 2 in the same app
● Use Angular 1 service in Angular 2
● Use Angular 1 component in Angular 2
● Use Angular 2 service in Angular 1
● Use Angular 2 component in Angular 1
17. Why use isolate scope?
● Encapsulation!
● Smaller components are easier to understand
● Easier to unit test
● This is how components work in Angular 2
23. Why use controllers over link?
● Removes redundant concept
● Let’s you use the “controller as” syntax
● Link functions don’t exist in Angular 2
24. Why use “controller as”?
● Don’t have to worry about scope inheritance
● Better organization
● Works well with ES6 classes
● This is how components work in Angular 2
25. Why use bindToController?
● Lets you use your controller for everything
● Don’t need to use $scope anymore, which
isn’t in Angular 2
● This is how components work in Angular 2
26. Why avoid $parent?
● Leads to brittle code
● Breaks encapsulation
● Makes unit testing hard
● Requires understanding scope inheritance
● It’s just the worst
● Can’t use it in Angular 2
32. Why use .component()?
● Nicer syntax than .directive()
● Uses “controller as” by default
● Uses bindToController by default
● Consolidates many redundant concepts into
components. E.g. ng-controller, .
controller(), ng-include, router
controllers, router views, .directive()
● Very similar to components in Angular 2
75. ApiService.ts
import {ROUTER_DIRECTIVES, RouteConfig, Route, ROUTER_PROVIDERS} from
"angular2/router";
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
@Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
new Route({
path: '/home',
name: 'ImageList',
component: ImageListComponent,
useAsDefault: true
})
])
class App { }
bootstrap(App, [HTTP_PROVIDERS, ROUTER_PROVIDERS, ApiService]);
76. Summary
● Angular 2 is based on components and
services
● Incremental migration
● Angular 1 best practices
● Not all Angular 1 apps need to be upgraded