【问题标题】：routing sub-modules in angular以角度路由子模块
【发布时间】：2017-04-13 16:12:18
【问题描述】：

不同的模块如何编写自己的路由？

我有一个角度应用程序，它有不同的模块。我将为每个模块编写特定的路由文件，但我收到了这个错误

未捕获的错误：[$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=routeServiceProvider%20%3C-%20routeService

这是我的代码：

sample.module.js

angular.module('app.sample', []);

sample.route.js

angular
.module('app.sample')
.run(appRun);

  /* @ngInject */
  function appRun (routeService) {
     routeService.configureRoutes(getRoutes());
  }

 function getRoutes () {
    return [ {
       url: '/sample',
       config: {
          templateUrl: 'sample.html'
       }
     }
    ];
}

我已经添加了 ngRoute 并将这些文件注入到 index.html 文件中

【问题讨论】：

什么是routeService？
我不知道那是什么，我只是从其他运行良好的应用程序中复制它@Claies
嗯，这是一项必须在某处定义的服务，但您的项目中似乎不存在。它不是ng-route的一部分。
没有这项服务的正确路由方式是什么？ @克莱斯
不清楚您要问什么。这看起来一点也不像与ng-route 一起使用的代码，并且您提到您只是从其他一些应用程序中复制了它，但您没有复制此代码所依赖的服务。如果您想使用ng-route，您是否尝试过使用官方文档中的代码？还是在“工作”应用中找到此服务并将其复制到您的新应用中？

标签： angularjs ngroute

【解决方案1】：

要实现这样的项目结构，ui-router 是最好的选择。它是一个单独的库，因此您必须将其作为依赖项包含到您的项目中。

以下是对您的案例有用的 sn-ps

dashboard.module.js

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

dashboard.router.js

    angular.module('app.dashboard')
        .config(routerConfig);

    routerConfig.$inject = ['$stateProvider'];
    function routerConfig($stateProvider) {
        $stateProvider
            .state('state1', {
                url: '/state1',
                templateUrl: 'url/to/state1.html',
                controller: function () {
                    // controller code here
                }
            })
            .state('state2', {
                url: '/state2',
                templateUrl: 'url/to/state2.html',
                controller: function () {
                    // controller code here
                }
            });
    }

sample.module.js

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

sample.router.js

angular.module('app.sample')
        .config(routerConfig);

    routerConfig.$inject = ['$stateProvider'];
    function routerConfig($stateProvider) {
        $stateProvider
            .state('state3', {
                url: '/state3',
                templateUrl: 'url/to/state3.html',
                controller: function () {
                    // controller code here
                }
            })
            .state('state4', {
                url: '/state4',
                templateUrl: 'url/to/state4.html',
                controller: function () {
                    // controller code here
                }
            });
    }

最后，app.module 连接所有这些模块

app.module.js

angular.module('app', [
    /*
     * sub-modules
     */
    'app.dashboard',
    'app.sample'
]);

总而言之，您有两个独立的子模块（app.dashboard 和 app.sample），它们有自己的路由逻辑，还有一个模块（app）将它们封装到一个 Angular 应用程序中。

$stateProvider，ui.router提供的服务，用于注册状态。

其他信息

由于您的应用程序是模块化的，您可能需要ui.router 大力支持的嵌套路由。阅读docs 以获取有关嵌套状态的更多信息。

更新

但是，如果你仍然想坚持使用 ngRoute，this 和 this 清楚地解释如何达到相同的结果。

【讨论】：