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);```