0

В настоящее время я работаю над проектом с использованием UI-маршрутизатора. Мой код в настоящее время определяет состояния как часть конфигурации приложения (пример ниже), но код растет. Есть ли хороший способ для модуляции этого кода как для организации, так и для модульного тестирования? Для меня лучшим решением было бы определить состояния как внешнюю службу.Modularize UI Router

.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; 
     }], 
    }, 

ответ

0

Я хотел бы начать с определения объектов отдельно, а не в линию (не отметить, что это делает код менее читаемым)

.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], чтобы разделить вашу конфигурационную часть.

0

Мое предложение основано на модулях ES6.

Short рассказ короткий. Каждое состояние имеет отдельную папку, например, контакты/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