Question

我正在尝试使用AngularJs 1.5应用的最佳做法。已经关注Todd Motto's和John Papa's样式指南

问题是：我的应用程序使用ngRoute 路由。所以，这个：

function RoutingConfig($routeProvider) { $routeProvider .when('/route1', { controller: 'Ctrl1 as vm', templateUrl: 'partials/route1.html', resolve: { myCoolService: myCoolService } // to abbreviate }) .when('/route2', { controller: 'Ctrl2 as vm', templateUrl: 'partials/route2.html' }) .otherwise({redirectTo: '/route1'}): } angular .module('myApp', ['ngRoute']) .config(RoutingConfig);

确定。到目前为止，非常好。

现在，让我们说，在我走向Angular 2之路上，我想采用将所有内容封装在指令方法中。通过这种方式，我将使用AngularJS 1.5 创建类似 Web组件的内容。

如果我遵循正确的做法，我可以为我的route1创建一个指令，并直接为该指令定义一个控制器：

function MyCoolDirective() { var directiveDefObj = { controller: Ctrl1, controllerAs: 'vm', scope: { data: "=", }, bindToController: true, // isolated scope link: linkFnc // just declared to abbreviate }; return directiveDefObj; } angular .module('myApp') .directive('MyCoolDirective', MyCoolDirective);

那么，我应该在哪里声明控制器？在路由配置中？在每个指令里面？对我来说听起来有点冗余。

Answer 1

使用你的例子，这就是我在爸爸风格指南中处理指令中的控制器

如上所述，我建议在准备角度2时检查新的角度1.5分量方法。https://docs.angularjs.org/guide/component

(function () {
    angular
        .module('AppName')
        .directive('directiveName', directiveName)
        .config(routeConfig);

    directiveName.$inject = ['$compile'];

    function directiveName($compile) {
        return {
            scope: {
                customAttribute: '=',
            },
            link: directiveLink,
            controller: directiveController
        };

        function directiveLink(scope) {

        }

        function directiveController($scope) {

        }
    }
    routeConfig.$inject ['$routeProvider'];

    function routeConfig($routeProvider) {
        $routeProvider.when('/home', {
            template: '<custom-directive></custom-directive>',
            resolve: {
                user: function($http) { return $http.get('...'); }
            }
        });
    }
})();

在AngularJS应用程序中使用封装指令和路由的推荐方法是什么？

1 个答案: