ui-router，路由并将代码拆分成更小的片段

Question

我想在我的应用程序的 .config 函数中设置路由。所以我有这个，效果很好

(function() {

angular
    .module('myApp', ['ui.router'])
    .config(config)

config.$inject = ['$stateProvider','$urlRouterProvider'];

function config($stateProvider,$urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'partials/dashboard.html',
            controller: function($scope, $stateParams) { .. },
            controllerAs: 'dashboard
    })
  }

})();

但是，我也尝试遵循 https://github.com/johnpapa/angularjs-styleguide 中记录的最佳实践。

所以，现在我的代码是这样的

[snip]
    templateUrl: 'partials/dashboard.html',
    controller: myController,
    controllerAs: 'dashboard'
   })
  }

 myController.$inject = ['$scope', '$stateParams']

 function myController($scope, $stateParams) { ... }
})();

这也行。

但是，当有大量路由时，这个文件会变得很大而且很乱，所以我尝试将控制器定义拆分到另一个文件中。

Angular 现在因错误

而呕吐

无法实例化模块 myApp，原因如下： ReferenceError: myController 未定义

我该如何解决这个问题？还是我完全疯了，找错了树——我应该在模块之外的其他地方声明路由吗？

谢谢！

Answer 1

您确定已将控制器添加到您的应用程序模块并以正确的顺序加载您的资源吗？这应该有效：

index.html:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        <script src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
        <script src="app.js"></script>
        <script src="controllers.js"></script>
    </head>
    <body ui-view></body>
</html>

app.js:

angular.module('app', [
    'ui.router'
]);

angular.module('app').config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider.state('root', {
            'url': '/',
            'controller': 'rootController',
            'templateUrl': 'root.html'
        });
    }
]);

controllers.js:

angular.module('app').controller('rootController', [
    '$scope',
    function ($scope) {
        $scope.value = 'Foo';
    }
]);

root.html:

<h1>{{value}}</h1>

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/TnXkm3ukAWjyNqX463Js?p=preview

ui-router，路由并将代码拆分成更小的片段

ui-router, routes and splitting code into smaller fragments

angularjs

angular-ui-router