角度UI路由器，控制器未定义
[英]Angular UI-router, controller is undefined
问题描述
I am kind of new to the AngularJS framework and I am trying to migrate my test project using the standard router to use the UI-router, but I get the following error: 
我是AngularJS框架的新手，我试图使用标准路由器迁移测试项目以使用UI路由器，但出现以下错误：
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
What I have done so far is: 到目前为止，我所做的是：
Controller: 控制器：
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
Router: 路由器：
angular.module('sm-web', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('root');
$stateProvider
.state('root', {
url: '',
templateUrl: path + 'ng/sm/view/main.html',
controller: 'mainCtrl'
});
}]);
Index: 指数：
<body ng-controller="mainCtrl">
<main-menu></main-menu>
<div class="container">
<div ui-view></div>
</div>
</body>
This works when I use the standard router, but not with the UI-router. 当我使用标准路由器而不是UI路由器时，此方法有效。 Does anyone have any idea of what I am doing wrong? 有人知道我在做什么错吗？
2 个解决方案
解决方案1
1 已采纳 2015-09-07 18:22:17
It seems you have an issue w/the order you declare things. 似乎您在声明事物的顺序方面遇到了问题。 For you to declare the module "sm-web" you need to do this: 为了声明模块“ sm-web”，您需要执行以下操作：
angular.module('sm-web', ['ui.router']);
Note that the presence of that 2nd array argument is what tells Angular that you're declaring the module (eg. creating a new module). 请注意，第二个数组参数的存在是告诉Angular您正在声明模块（例如，创建一个新模块）。 When you leave that 2nd argument out, you're retrieving the module you previously declared. 当您省略第二个参数时，您将检索先前声明的模块。
So with that in mind, look at how it all is coming together in your code: 因此，请记住这一点，看看代码中的所有内容如何组合在一起：
- To declare the controller, you retrieve the module "sm-web" (by leaving off the 2nd array arg). 要声明控制器，请检索模块“ sm-web”（通过保留第二个数组arg）。
- When configuring the router states, you declare a new module "sm-web". 在配置路由器状态时，您声明一个新模块“ sm-web”。 But note that immediately after you declare this new module, you try to register a state with the controller named "mainCtrl" -- but that doesn't exist yet. 但是请注意，在声明此新模块后，您立即尝试使用名为“ mainCtrl”的控制器注册状态-但这尚不存在。
You need to create the module somewhere before doing all of the above. 执行上述所有操作之前，您需要在某个位置创建模块。 After creating the module, then register the controller on the module. 创建模块后，然后在模块上注册控制器。 Finally, with the controller defined, then you can register the state that uses the controller. 最后，在定义了控制器的情况下，您可以注册使用控制器的状态。
There's too many ways to solve this ordering problem, so I'm not going to suggest anything further. 有太多方法可以解决此订购问题，因此，我将不再提出任何建议。 It depends on what files the code lives in and the order you load those files in index.html . 这取决于代码所在的文件以及在index.html加载这些文件的顺序。
解决方案2
0 2015-09-07 15:33:54
In order to avoid your problem change your code by the following code: 为了避免出现问题，请通过以下代码更改代码：
// mainCtrl.js // mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.