Question

我目前正在使用UI路由器开展项目。我的代码目前将状态定义为应用程序配置的一部分（下面的示例），但代码正在增长。有没有一种很好的方法来模块化这个代码用于组织和单元测试？对我来说，最好的解决方案是将状态定义为外部服务。

.state('page', {
    url: '/page/{id}',
    params: {
      id: ['$q', function ($q) {
        // Code
        return defaultValue;
      }],
    },
    templateUrl: 'page.html',
    'controller': 'CatalogDetailsController',
    'controllerAs': 'details',
    resolve: {
      categories: ['$q', function ($q) {
        // Code
        return promise;
      }],
    },

Answer 1

我首先要分别定义对象而不是内联（请注意，这确实会降低代码的可读性）

.state('page', {
    url: '/page/{id}',
    params: myparamsObj // defined somewhere else.
    templateUrl: 'page.html',
    'controller': 'CatalogDetailsController',
    'controllerAs': 'details',
    resolve: myResolveObj, // defined somewhere else.

如果您的app.config变得太大，您可以使用[refactor large AngularJS module config into separate files]问题中提到的方法拆分您的配置部分。

Answer 2

我的提议基于ES6模块。

长话短说。每个州都有一个单独的文件夹，例如contacts / one / edit。在此文件夹中，我有以下文件：

controller.js，controller.spec.js
state.js，state.spec.js
state.html

state.js包含状态定义对象：

import controller from './edit.controller';
import template from './edit.state.html';

// State name is exported so we can use it in the corresponding tests
export const name = 'contacts.one.edit';

export default {
  name,
  url: '/edit',
  template,
  controller,
  controllerAs: 'ctrl'
};

可以在模块的配置块中激活此配置：

import oneState from './one/one.state';

export function states($stateProvider) {
  'ngInject';

  $stateProvider
    .state({
      parent: 'app',
      name: 'contacts',
      abstract: true,
      url: '/contacts',
      template: '<div ui-view autoscroll="true"></div>'
    })

    .state(oneState)
    .state(oneEditState)
    // etc...
}

在这里，您将找到完整的示例https://github.com/lucassus/angular-webpack-seed/tree/ce4e9b91ce9ed47ca74073d754b0cbacff8cb65f/src/app/contacts/one/edit

模块化UI路由器

2 个答案: