Question

我正在尝试模块化我在现有的angular.js应用程序中开发的功能。

我已为此功能的所有不同部分创建了命名空间模块，我们将在此处调用功能abc。

我在index.html中引用了所有这些.js文件，我正在使用angular.js v1.3.0-beta6

// abc.directives.js
var abcDirectivesModule = angular.module('s1.abc.directives', []);
abcDirectivesModule.directive('abcSelector', ['abcSelectorInit']);
function abcSelectorInit() { // ... }

// abc.controllers.js
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']);
abcControllersModule.controller('abcController', ['$scope', 'abcControllerInit']);
function abcControllerInit($scope) {
    var vm = this;

    vm.data = "Data!";
}

// abc.module.js
var abcModule = angular.module('s1.abc', ['s1Common', 's1Security', 's1.abc.controllers']);

abcModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/abcs', {
            redirectTo: '/abcs/findabcs'
        }).
        when('/abcs/findabcs', {
            templateUrl: '/js/angularjs/app/abcs/abc.partial.finder.html',
            controller: 'abcController',
            controllerAs: 'vm'
        });
}]);

我遇到的问题是当我尝试在/abcs/findabcs下加载页面时，angular.js给我一个错误。

这是我的错误Error: [ng:areq] Argument 'abcController' is not a function, got string

我试图用这些模块化组件完成的工作是不可能用角度来实现的吗？

我在不同地方看到更多模块化应用程序的引用（odeToCode，stackoverflow，stackoverflow，similar jsfiddle）我希望使用$ routeProvider路由重现此样式在父模块中（`s1.abc1）。

更新

我意识到我现在的错误。我试图结合控制器/指令的两种功能/样式的声明函数。

不正确

// abc.controllers.js
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']);
abcControllersModule.controller('abcController', ['$scope', 'abcControllerInit']); // Function name passed in as string
function abcControllerInit($scope) {
    var vm = this;

    vm.data = "Data!";
}

正确

// abc.controllers.js
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']);
abcControllersModule.controller('abcController', ['$scope', abcControllerInit]); // Function name passed in directly, not as string
function abcControllerInit($scope) {
    var vm = this;

    vm.data = "Data!";
}

函数名称abcControllerInit 不应作为带有依赖项的字符串传递。

Answer 1

尝试以下代码。控制器应该是一个功能。

//abc.directives.js
var abcDirectivesModule = angular.module('s1.abc.directives', []);
abcDirectivesModule.directive('abcSelector', ['abcSelectorInit',
function abcSelectorInit() { // ... }]);

// abc.controllers.js
var abcControllersModule = angular.module('s1.abc.controllers', ['s1.abc.directives']);
abcControllersModule.controller('abcController', ['$scope',
function abcControllerInit($scope) {
    var vm = this;

    vm.data = "Data!";
}]);

// abc.module.js
var abcModule = angular.module('s1.abc', ['s1Common', 's1Security', 's1.abc.controllers']);

abcModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/abcs', {
            redirectTo: '/abcs/findabcs'
        }).
        when('/abcs/findabcs', {
            templateUrl: '/js/angularjs/app/abcs/abc.partial.finder.html',
            controller: 'abcController',
            controllerAs: 'vm'
        });
}]);

AngularJS：从单独的模块路由到控制器

1 个答案: