角度路由子模块

Question

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

我有一个角度的应用程序，它有不同的modules.i我打算写为他们每个人，具体路线的文件，但我得到这个错误

Uncaught Error: [$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文件

Answer 1

注入这些文件，要达到这样的项目结构，ui-router是最好的一段路要走。它是一个单独的库，因此您必须将其作为依赖项包含到项目中。

这里是片段，将是有用的情况下

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），它们包装成一个角度的应用程序。

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

其他信息

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

更新

但是，如果你仍然想坚持ngRoute，this和this解释清楚如何实现相同的结果。