Question

我是AngularJS框架的新手，我正在尝试使用标准路由器迁移我的测试项目以使用UI路由器，但是我收到以下错误：

Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined

到目前为止，我所做的是：

控制器：

// mainCtrl.js
angular.module("sm-web")
    .controller('mainCtrl',['$scope',
            function($scope) {
                ...
    }]);

路由器：

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'
        });

    }]);

索引：

<body ng-controller="mainCtrl">
    <main-menu></main-menu>
    <div class="container">
        <div ui-view></div>
    </div>
</body>

当我使用标准路由器时，这适用，但不适用于UI路由器。有没有人知道我做错了什么？

Answer 1

您声明事情的顺序似乎有问题。要声明模块“sm-web”，您需要这样做：

angular.module('sm-web', ['ui.router']);

请注意，第二个数组参数的存在是告诉Angular您正在声明模块（例如创建一个新模块）的原因。当您退出第二个参数时，您将检索先前声明的模块。

因此，考虑到这一点，请查看代码中的所有内容：

要声明控制器，您将检索模块“sm-web”（通过不使用第二个数组arg）。
配置路由器状态时，声明一个新模块“sm-web”。但请注意，在声明此新模块后，您尝试使用名为“mainCtrl”的控制器注册一个状态 - 但这还不存在。

在完成上述所有操作之前，您需要在某处创建模块。创建模块后，在模块上注册控制器。最后，在定义了控制器的情况下，您可以注册使用控制器的状态。

解决这个排序问题的方法太多了，所以我不打算再提出任何建议。这取决于代码所在的文件以及您在index.html中加载这些文件的顺序。

Answer 2

为了避免您的问题，请通过以下代码更改您的代码：

// mainCtrl.js

angular.module("sm-web")
    .controller('mainCtrl',['$scope',
            function($scope) {
                ...
    }]);

Angular UI-router，控制器未定义

2 个答案: