正在模块化ui路由器状态定义

Question

我正试图通过功能（模块）而不是类型来构建角度应用程序。我在对ui路由的状态定义进行模块化时遇到了问题。我将我的应用程序分为模块app.core、app.company和app.products。

现在，我想我的模块应该安装自己的状态和路由，而不是一个大的.config语句。

// core module (core/module.js)
angular
    .module('app.core', ['ui.router', 'app.company', 'app.products'])
    .config(function($stateProvider, $urlRouterProvider) {
        .state('root', { /* abstract */ })
        .state('home', { /*...*/ })
        .state('404', { /*...*/ })
    });
    $urlRouterProvider.otherwise('home');
// company module (company/module.js)
angular
    .module('app.company', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        .state('company', { /*...*/ })
        .state('company.aboutus', { /*...*/ })
        .state('company.contactus', { /*...*/ })
    });
// products module (products/module.js)
angular
    .module('app.products', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        .state('products', { /*...*/ })
        .state('products.category', { /*...*/ })
        .state('products.detail', { /*...*/ })
    });

Angular对我喊道，它无法解决与公司相关的状态。我正在失去信心，我所追求的是否可行。。。

Answer 1

尝试从公司和产品中删除ui.router以便

angular
.module('app.company')
.config(function($stateProvider, $urlRouterProvider) {
    .state('company', { /*...*/ })
    .state('company.aboutus', { /*...*/ })
    .state('company.contactus', { /*...*/ })
});
angular
.module('app.products')
.config(function($stateProvider, $urlRouterProvider) {
    .state('products', { /*...*/ })
    .state('products.category', { /*...*/ })
    .state('products.detail', { /*...*/ })
});

并确保在索引页面中的其他模块之前声明了app.core。

<script src="scripts/app.core.js"></script>
<script src="scripts/app.company.js"></script>
<script src="scripts/app.products.js"></script>