Question

我试图通过功能（模块）而不是类型来构建一个角度应用程序。虽然模块化ui-route的状态定义，但我遇到了问题。我将应用分为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>

模块化ui-router状态定义

1 个答案: