Angular component based approach and working with resolve in Router

Question

So I'm working with the component based approach in angular, lets say I have A directive called <home></home>;

import template from  './home.html';
import controller from './home.controller.js';

angular.module('myApp')
   .directive('home', homeDirective);

let homeDirective = () => {
    return {
        restrict: 'E',
        template, 
        controller,
        controllerAs: 'vm',
        bindToController: true
    };
};

Now I'm able to use the component <home></home> in my routing as follow:

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home></home>'
        })
    })

I really like this approach, but with the "old" approach I was used to using "resolve" in my routeconfig to render the component only when a promise was resolved:

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            templateUrl: './home.html',
            controller: './home.controller.js',
            resolve: {
            message: function(messageService){
                return messageService.getMessage();
            }
        })
    })

Question

How can I use resolve with a component based approach in angular? aaj

You pointed one big issue in angular route system. locals (resolves ) are only passed to the route controller. If no controller is specified, the resolves will be fetched before route resolution but there are no way to access them in the template... Best workaround will be to use a service to fetch your resolves and await them in your directive's link or directive's controller init... — Pierre Gayvallet
– Pierre Gayvallet, Commented Dec 2, 2015 at 14:20

Tamas Hegedus · Accepted Answer · 2016-02-22 09:11:52Z

There is a closed issue about that: support resolve option for directives.

The conclusion is that they don't want arbitrary directives being loaded asynchronously, because it would cause too much flicker.

The good news is that Angular 2 supports this (and much more) at the DI layer in a way that's cohesive and doesn't introduce a ton of additional complexity.

In Angular 1.x you could attribute the directive with some information from where the message is to be obtained, and handle the asynchronous loading in your controller. This way you can show some nice loader screen too.

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home my-datasource="feed1"></home>'
        }).when('/other', {
            template: '<home my-datasource="feed2"></home>'
        })
    })
    .factory('DataSources', (messageService) => {
        return {
            feed1: messageService.getMessage,
            feed2: messageService.getError
        };
    });

Or, if you want message to be from always the same source, you can burn messageService.getMessage().then(...) into your controller.

If you don't want the directive to be visible at all before the promises resolve, you can introduce a scope variable initially set to false and then set it to true on resolution, e.g.:

app.controller('HomeController', ($scope, messageService) => {
   $scope.loaded = false;
   messageService.getMessage().then(message => {
       ...
       $scope.loaded = true;
   });
   ...
});

and hide the directive until loaded with ng-if="loaded" at the root element. Yes, that is a bit too much user code, but you have control over everything at least.

Jami Couch · Accepted Answer · 2015-12-05 18:54:36Z

1

As it turns out, the angular $routeProvider passes the resolved locals on to the $routeChangeSuccess event (nextRoute.locals). So you could create a service that listens for route changes and exposes the locals:

angular.module('myApp', ['ngRoute'])
.factory('$routeLocals', function($rootScope) {
  var locals = {};
  $rootScope.$on('$routeChangeSuccess', function(_, newRoute) {
    angular.copy(newRoute.locals, locals);
  });
  return locals;
})
.run(function($routeLocals) {});

Then you can inject $routeLocals into your directive and use them.

Example: http://codepen.io/fbcouch/pen/eJYLBe

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L614

edited Dec 5, 2015 at 18:54

answered Dec 5, 2015 at 18:42

Jami Couch

4513 silver badges9 bronze badges

Comments

fedorshishi · Accepted Answer · 2015-12-10 07:48:44Z

1

In Angular 1.x when some data comes to my directive bindings('=') from ajax and more over i watch this bindings in directive, i have not rendered directive right way. I check a lot of stackoverflow topics and blogs and all they writes about data bindings and watch, but it not help me, i saw with my own eyes that sometime directive not rendered but data came.

Only resolve in the directive parent controller helps me in this situation, because in other cases its looks like undefined behavior. I log from my directive, data setup ok, but directive not rendered!(in simple case i am not use ng-if or ng-show to hide it).

You can read more here

answered Dec 10, 2015 at 7:48

fedorshishi

1,4771 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular component based approach and working with resolve in Router

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related