1. ng-conf 2015
aka how to move to angular 2.0

2. The State of Angular 1
Angular 1.4
● New Router
● internationalization
● New ng-animate
● ng-messages — multiple includes, more dynamic
● ng-cookies
○ set path and domain
○ cleans up cookie update process
● 30% faster digest than 1.3
● 2-4% memory footprint improvement
support plan for 1x
● angular.io will be used to gauge traffic on angular 2.0 (vs https://angularjs.org/ and angular 1)
● continue to release until everyone migrates to 2x

3. Angular 2 Migration Plan
Why migrate?
Angular 2 themes
● flexible, faster, simpler = more productive developers
● angular.io
How is angular 2 different?
● simplification of existing concepts
● integration of new powerful concepts
● productivity enhancements to javascript itself
● AtScript — proposal to extend javascript (es5)
● ES6
● TypeScript
● Annotations
● Integration of Traceur
● View cache -- do not re-render pages already visited

4. Igor Minar and Brad Green talking about Angular 2 view cache.

5. Angular 2 Migration Plan
Migration Plan Options
1. big bang plan — load both 1x and 2x libraries
2. incremental — new router supports
a. migrate individual views to 2x
b. rest of the app remains on 1x
Migration Keep in Mind
3. follow best practices on 1x
4. style guide: https://github.com/johnpapa/angular-styleguide
5. https://www.youtube.com/watch?v=hG-ARy0oqjI&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7&index=25
6. new router
7. es6 (JavaScript 2015) modules
8. typescript types (optional)

6. Migration to angular 2 can be top down or bottom up.

7. Start with one module.

8. Save most expensive migrations for last.

9. Angular Router
ngRoute is too simple for modern, complex apps, and for Angular 2, we needed better router.
router design at ng-europe
ngNewRouter
ng-link — creates href
ng-viewport — like ng-view, but can have multiple
lifecycle hooks
● prompts for save/delete
New API for lazy loading!
Uses route-recognizer from EmberJS
github.com/angular/router
angular.github.io/router

10. Brian Ford explaining the new router

11. The Shadow DOM
https://www.youtube.com/watch?v=AbunztfV5vU&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7&index=6
1.3 web components
● insertion point in shadow dom
● hidden: span.createShadowRoot()
● visible: host.createShadowRoot()
○ host.shadowRoot.innerHTML
● transclude = true — preserves existing template rather than overwriting with template
● manual scope
2.0 component directives
● shadow dom
● sensible default scope — only need name and template
● class & annotation — ES6 class + constructor, annotations

12. TypeScript and ES6
https://www.youtube.com/watch?v=U7NYTKgkZgo&index=8&list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7
What is TypeScript?
● Superset of JavaScript
● Modular
● Scalable application structure
● Strongly typed classes
● Can still use functional approach
● Tooling support
● ES6 standards
https://github.com/seanhess/angularjs-typescript
https://github.com/danwahlin

13. Bindings
Angular 2
two kinds of bindings:
1. literal
2. expressions
Why [property] not {{expression}}
Always write to attributes, not properties
[properties]=“expression”
unneeded directives (about 20) == because they are available in HTML
explicit templates
<template foreach #item [in]=“items”></template>
simpler, predictable, toolable
shadow dom out of the box

16. Angular 2 binds to properties, not attributes.

21. Lazy Loading
divide code into modules
placeholder route for each lazy-loaded path
new injector that forwards whitelisted lazy loaded changes
register real routes
route.reload()
Until Angular 2 lazy load is ready, ocLazyLoad:
https://github.com/ocombe/ocLazyLoad