UI-Router
Angular 2
+
@ChrisThielen
Migrating a UI-Router application to Angular 2
Slides URL: http://bit.ly/UIR-ngMN-slides
UI-Router
- State machine based
- Robust
- Flexible
- Thousands of existing apps in the wild
The defacto standard for routing in Angular 1
Angular 2
Currently in beta
UI-Router for Angular 2
Currently in alpha
Migration Plan
"The Plan"
-
Update UI-Router
-
Migrate to ng1 components
-
Add Angular 2
-
Add ng1 ➡︎ ng2 adapters
-
Migrate to ng2 services
-
Migrate to ng2 components
-
Remove Angular 1
{
Now Later Finally
{
{
➤ Migration Plan
Update UI-Router
1.0.0+
0.2.x events
$stateChangeStart
$stateChangeSuccess
$stateChangeError
1.0 $transitions
onBefore (sync)
onStart
onExit (for a state)
onRetain (for a state)
onEnter (for a state)
onFinish
onSuccess/onError
➤ Update UI-Router
Transition Hooks
- Declarative
- to and/or from state
- entering and/or exiting state
- Async -- Promise based
- Can modify the current transition
- cancel or redirect
- wait for async
Follow along:
http://bit.ly/UIR-sample
http://bit.ly/ngMN-sample
➤ Update UI-Router
Transition Hooks
➤ Update UI-Router
Transition Hooks
➤ Update UI-Router
0.2.x views
- template + controller
1.0 views
- template + controller
- "route to component template"
- component with autobind
➤ Update UI-Router
Migrate to components
From
- template
- ng-controller
- controllerAs
- $scope
- directives
- require
- link
- bindToController
To
.component() api
- template
- controller
- bindings
- require
helpful blog post: http://bit.ly/component15
➤ Migrate to .component()
Do not migrate
- DOM manipulation
- attribute directives
- <foo my-directive></foo>
- advanced/complicated
- compile()
- priority
- terminal
➤ Migrate to .component()
state
component
"Route to component template"
.state("foo", {
template: "<component foo-binding='$resolve.foo'></component>"
});
➤ Migrate to .component()
state
component
"component:"
➤ Migrate to .component()
state
component
"component:" and "bindings:"
➤ Migrate to .component()
Add Angular 2
Module System
Write modular code. Import dependent code.
- Avoid <script> tags
- Bootstrap the application javascript code
- Bootstrap imports a subapp dependent module
- Subapp imports its own dependencies
- Recursively
- build
- a dependency
- tree
- a dependency
- build
- Recursively
- Subapp imports its own dependencies
-
ES6 and Typescript: import {fooComp} from "./foo"
-
CommonJS: var fooComp = require("./foo").fooComp
➤ Add Angular 2
Module System
Module Loader. Bundler.
- SystemJS - Angular 2 team recommends
- JSPM
- Webpack - Excellent bundling capabilities
Each of these tools can follow the application dependency tree from the root of your application
➤ Add Angular 2
Fetch ng2 libraries
- Angular 2 and dependencies
- UI-Router for Angular 2
$ npm install
➤ Add Angular 2
Install ng2 libraries
Use <script> tags. Order exactly as shown
➤ Add Angular 2
Wire up ng2 adapters
Wire up angular2/upgrade and ui-router-ng1-to-ng2
➤ Add Angular 2
Migrate to Angular 2 Components, Directives, and Services
Create your first ng2 component
- Use @Component
- Export the component class
- Add UIROUTER_DIRECTIVES
- ui-view
- uiSref
- uiSrefActive
➤ ng2 components
Create your first ng2 component
- Switch to ng2 syntax
- Use UIROUTER_DIRECTIVES
ng1
ng2
Bottoms Up!
- Use a "bottom-up" approach
- Reason/caveat: The ng2 ui-view cannot render an ng1 template/controller
- Start with simple leaf components
- Move up to the parent component
- Use ng2 ui-router directives (ui-view, uiSref, etc)
- Use other ng2 directives where possible
- Use angular2/upgrade to temporarily use an ng1 directive within an ng2 template, where needed
➤ ng2 components
Update the view in the state definition
- Remove the directive name (string)
- Use the imported ng2 component (class)
Directives and Services
- Rewrite non-template directives as ng2 directives
- Rewrite ng1 services as ng2 services
- (details are out of scope for this talk)
DONE!
WHAT NOW?!
Angular 2 Bootstrap
- Remove ui-router-ng1-to-ng2 adapter
- Remove the UpgradeAdapter bootstrap()
- Add standard Angular 2 bootstrap()
- Remove angular-ui-router (ng1)
- Keep ui-router-ng2
➤ Cleanup
"The Plan"
-
Update UI-Router
-
Migrate to ng1 components
-
Add Angular 2
-
Add ng1 ➡︎ ng2 adapters
-
Migrate to ng2 services
-
Migrate to ng2 components
-
Remove Angular 1
{
Now Later Finally
{
{
... but the title said "big bang" too???
Re. Write. Everything.
- Skip all hybrid
- Top Down
- Rewrite all services
- Rewrite each component in the tree
Start here: https://github.com/ui-router/quickstart-ng2
➤ Big Bang
fin
Component Doc: https://docs.angularjs.org/guide/component
1.3+ Polyfill: https://github.com/toddmotto/angular-component
UI-Router: https://github.com/angular-ui/ui-router/releases
UI-Router Sample App: https://github.com/ui-router/sample-app
UI-Router ng2 adapter: https://github.com/ui-router/ng1-to-ng2
UIR ng2 quickstart: https://github.com/ui-router/quickstart-ng2
http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html - or- http://bit.ly/component15
Official upgrade docs for ng2:
https://angular.io/docs/ts/latest/guide/upgrade.html
Migrating a UI-Router app to Angular 2
By Chris Thielen
Migrating a UI-Router app to Angular 2
Incrementally upgrade your UI-Router application from Angular 1 to Angular 2
- 7,143