Question

我在应用程序中有很多控制器，我不想提前加载它们，因为组合的JS变得非常沉重。

所以我试过以下：

在我的主app.js中，我的路线定义如下：

$routeProvider.when('/myaccount', {
    templateUrl: 'my-account.html',
    title: 'My Account'
})

my-account-controller.js控制器定义如下：

angular.module('myApp',[]).controller('my-account', ['$scope', function($scope) { 
    $scope.greeting = 'Hola!';
}]);

最后在my-account.html中，我有一个脚本标记，它应该在使用之前同步加载控制器。我正在使用ng-controller指令附加该控制器：

script src='/assets/my-account-controller.js'
<div class="container" ng-controller='my-account'>
   ...
</div>

问题是某种程度上，Angular无法将my-account识别为控制器并且它会抛出以下错误：

Error: [ng:areq] Argument 'my-account' is not a function, got undefined

有人可以告诉我缺少的是什么吗？

Answer 1

您应该在控制器名称中使用UpperCamelCase，我不知道您是否已经定义了myApp，如果是，您应该从模块方法中删除第二个参数，因为它将重置依赖项：< / p>

所以这个 - ＆gt; angular.module('myApp',[])应为 - ＆gt; angular.module('myApp')

angular.module('myApp').controller('MyAccount', ['$scope', function($scope) { 
    $scope.greeting = 'Hola!';
}]);

在你看来：

<script src='/assets/my-account-controller.js'
<div class="container" ng-controller='MyAccount'>
   ...
</div>

路线：

$routeProvider.when('/myaccount', {
    templateUrl: 'my-account.html',
    title: 'My Account',
    controller: 'MyAccount'
});

您可以阅读有关角度最佳做法的更多信息here

Answer 2

这不是正确的方法。您必须在您正在使用的路线中声明您的控制器，例如

$routeProvider.when(''/myaccount'', {
              templateUrl: 'my-account.html',
              controller: 'my-account',
              title: 'My Account'
})

如何动态加载AngularJS中的控制器？

2 个答案: