Bridging the Gap to 2.0

New

Router

Component

Chris Sevilleja

scotch.io

Quick Links

Angular Articles by Chris and scotch.io

https://scotch.io/tag/angular-js

 

This Presentation GitHub Repo

https://github.com/scotch-io/angular-router-1x

 

Presentation Video

https://www.youtube.com/watch?v=DGT3Htcqygk

 

Component Router GitHub Repo

https://github.com/angular/router

ngRoute

Simple

No nested views

No sibling views

ui-router

Good for current applications

Not built for migration

Greatly inspired component router

Current Routing

Using the

Component Router

View
Controller
Router (optional)

Angular 2 Component

@Component({
  selector: 'articles'
})

@View({
  inline: "<div>Look! I'm at {{ confName }}!</div>"
})

class ArticlesComponent {}

UI-Router Configuration

$stateProvider
  .state({
    url         : '/articles',
    templateUrl : 'components/articles/articles.html',
    controller  : 'ArticlesController',
    controllerAs: 'articles'
  });

Comparison

ui.router

 

$stateProvider.state()

 

<ui-view>

 

ui-sref

ngComponentRouter

 

$router.config()

 

<ng-outlet>

 

ng-link

|-- components/

     |-- articles/

          |-- articles.js

          |-- articles.html

|-- app.js

UI-Router Configuration

$stateProvider
  .state({
    url         : '/articles',
    templateUrl : 'components/articles/articles.html',
    controller  : 'ArticlesController',
    controllerAs: 'articles'
  });

Component Router Configuration

$router.config([
  { path: '/articles', component: 'articles' }
]);

How Are Components Mapped?

./components/<component_name>/<component_name>.html

Template

Controller

Controller As

<Component_name>Controller
<component_name>

The About Component

./components/articles/articles.html

Template

Controller

Controller As

ArticlesController
articles

What if my app

doesn't match that

folder setup!?

|-- controllers/

     |-- articles.js

|-- views/

     |-- articles.html

|-- app.js

Custom Component Mapping

Custom Controller Name

$componentMapper
  .setCtrlNameMapping(function(name) {
    return name + 'Ctrl';
  });

Custom Template Location

$componentMapper
  .setTemplateMapping(function(name) {
    return './views/' + name + '.html';
  });

Configuring within Component

Module

ArticlesCtrl.$templateUrl = 'views/articles.html';
function ArticlesCtrl {}

Component Mapper Config

$componentMapper
  .setTemplateMapping(function(comp) {
    var ctrl = $componentMapper.controller(comp);
    var template = $controllerIntrospector(name, '$templateUrl');

    return template;
  });

3 Upgrade Options

  • Move files around for components/

  • Adjust component mapping
  • Use $controllerIntrospector

Bridging the Gap

Angular 2 Component

@Component({
  selector: 'articles'
})

@View({
  inline: "<div>Look! I'm at {{ confName }}!</div>"
})

class ArticlesComponent {}

Component Comparison

@View({ templateUrl: 'views/articles.html' })
class ArticlesComp {}

Angular 1 with $controllerIntrospector

Angular 2 Component

ArticlesCtrl.$templateUrl = 'views/articles.html';
function ArticlesCtrl {}

UI-Router to Component Router

Add dependencies

Set routing configuration

Change directives

Extra!

Lifecycle Hooks

  • canActivate: Fires before switching
  • activate: Fires right before finishing
  • canDeactivate: Fires before new things loaded
  • deactivate: Fires for each component removed

Another Extra!

Angular 1.5 Component

angular
  .module(...)
  .component('articles', {
    selector: 'articles',
    controller: 'ArticlesController',
    templateUrl: 'views/articles.html'
  });

Thanks!

Chris Sevilleja

@sevilayha

scotch.io

ngVegas Router Talk

By Chris Sevilleja

Made with Slides.com

ngVegas Router Talk

  • 2,100

More from Chris Sevilleja