基于角度组件的方法并在Router中使用resolve

所以我正在使用基于组件的角度方法,假设我有一个名为的指令 ;

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
    };
};

现在我可以在我的路由中使用该组件,如下所示:

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

我真的很喜欢这种方法,但是使用"旧"方法,我习惯在我的routeconfig中使用"resolve"来仅在解析promise时呈现组件:

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

题

如何在角度中使用基于组件的方法的解决方案？AAJ

关于这个问题有一个封闭的问题:指令的支持解决选项.

结论是他们不希望异步加载任意指令,因为它会导致过多的闪烁.

好消息是Angular 2以一种有凝聚力的方式在DI层支持这个(以及更多)并且不会引入大量额外的复杂性.

在Angular 1.x中,您可以将指令归因于要从中获取消息的一些信息,并处理控制器中的异步加载.这样你就可以展示一些不错的装载机屏幕了.

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

或者,如果您希望message始终使用相同的源,则可以将其刻录messageService.getMessage().then(...)到控制器中.

如果你不希望指令在promises解决之前完全可见,你可以引入一个最初设置为false的作用域变量,然后在解析时将其设置为true,例如:

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

并隐藏指令,直到ng-if="loaded"在根元素处加载.是的,用户代码太多了,但你至少可以控制一切.