Use Angular 1.5 components as routes

[jonricaurte]

Make ui-router have a similar feature as ngRoute does here using angular 1.5:

https://docs.angularjs.org/guide/component#components-as-route-templates

[jonricaurte]

Looks like the change was added to ngView here:

angular/angular.js@983b059

[jonricaurte]

Looks like it will need to be added here:

https://github.com/angular-ui/ui-router/blob/master/src/viewDirective.js

[christopherthielen]

thanks, yes this is definitely on our radar. Targeting 1.0-beta

[jonricaurte]

Looks like 1.0alpha was merged to master after I left the previous comment. Looks like the change would be here for angular 1:

https://github.com/angular-ui/ui-router/blob/master/src/ng1/viewDirective.ts

Was wondering if there was a timeframe for the beta?

Thanks!

[jonricaurte]

@christopherthielen Tried it out on the legacy branch with this commit (jonricaurte@a4cab7d) and seems to work. Will work on a PR with tests. Does not seem like anything else needs to be added.

[felixfbecker]

This is possible, but it would be nice to have $resolve like ngRouter

[BrianCerasuolo]

Would love to have this sooner rather than later

[smajl]

Yes, please, $resolve and resolveAs much needed! So much boilerplate will go away for us who are adopting component routing.

[lucianogreiner]

+1

[mgamsjager]

+1 for $resolve

[felixfbecker]

Also, $resolve should not only be available in state templates, but also in UI Bootstrap modals :)

[christopherthielen]

UI-Router 0.2.18 routing to angular 1.5 components: http://plnkr.co/edit/JDj7lFpKKsJBykrsZQGZ?p=info

The guts are here:

"use babel";

let module = angular.module('ui.router.components', ['ui.router']);

function bindResolves() {
  var names = controller.$inject = ['$scope'].concat(Array.prototype.slice.call(arguments));

  function controller($scope) {
    var values = Array.prototype.slice.call(arguments);
    for (var i = 1; i < values.length; i++) {
      $scope[names[i]] = values[i];
    }
  } 

  return controller;
}

let unnestR = (acc, array) => acc.concat(array);

function registerComponentDecorator($stateProvider) {
  $stateProvider.decorator('component', function(stateDef, parent) {

    if (stateDef.component) {
      let cmp = stateDef.component;
      console.log(`state ${stateDef.name} routes to a component: ${cmp}`)
      stateDef.controllerProvider = function($injector) {
        let directive = $injector.get(stateDef.component + "Directive")
        let keys = directive.map(d => Object.keys(d.bindToController)).reduce(unnestR, []);
        return bindResolves.apply(null, keys);
      }

      stateDef.templateProvider = function($injector) {
        let directive = $injector.get(stateDef.component + "Directive")
        let keys = directive.map(d => Object.keys(d.bindToController)).reduce(unnestR, []);
        let attrs = keys.map(key => `${key}="${key}"`).join(" ");
        return `<${cmp} ${attrs}></${cmp}>`
      }
    }


    return stateDef.component;
  })
}


module.config(registerComponentDecorator); 
module.constant('bindResolves', bindResolves);```

[bitflower]

I'm using 1.0.0 alpha 4 but the binding to .component does not work. The milestone of this issue was set to 1.0.0 alpha 1 though. Is this implemented or not?

[christopherthielen]

@bitflower yes 1.0.0-alpha.4 should route to component. Can I see your code?

[bitflower]

It works, it was my mistake. Sorry but thanks!

[trashhalo]

Heads up to anyone else who finds this plunkr above ☝️ it has a bug. It needs to kebob the attribute keys "myResolvedBinding" vs "my-resolved-binding". or else it will fail to inject resolves with capital letters. Also it should have probably been an one way binding < instead of an =.

@christopherthielen hopefully you'll consider backporting the code here to legacy its super hard to convince people to let you install an 1.0 alpha version to get component routing. or atleast put that in a bower repo somewhere for me to include more formally.

[christopherthielen]

@trashhalo @Jared314 @fetters5

Use this polyfill for legacy branch: https://github.com/softsimon/ui-router-route-to-components