UI-Router

Angular 2

+

@ChrisThielen

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

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

 ➤ 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

 ➤ 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

To

 ➤ Migrate to .component()

Do not migrate

• DOM manipulation
• attribute directives
  • <foo my-directive></foo>
• advanced/complicated
  • compile()
  • priority
  • terminal

 ➤ Migrate to .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.

 ➤ 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

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

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