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
  • 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