1

我正在尝试模块化我在现有 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.

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

我想用这些模块化组件来完成的事情是不是用角度根本不可能实现的？

我在各个地方看到了对更模块化应用程序（odeToCode、stackoverflow、stackoverflow、类似的 jsfiddle）的引用，我希望在父模块（`s1.abc1 ）中使用 $routeProvider 路由来重现这种风格。

更新：

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

不正确

// 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 不应作为带有依赖项的字符串传递。

4

1 回答 1

3

试试下面的代码。控制器应该是一个函数。

//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'
        });
}]);
于 2014-09-16T18:45:47.150 回答