javascript - Angularjs ui-router 状态定义

Question

在 Angular ui 路由器中 tutorial ，所有状态都定义在同一个js文件中。

myApp.config(function($stateProvider) {
  // An array of state definitions
  var states = [
    { name: 'hello', url: '/hello', component: 'hello' },
    { name: 'about', url: '/about', component: 'about' },

    { 
      name: 'people', 
      url: '/people', 
      component: 'people',
      resolve: {
        people: function(PeopleService) {
          return PeopleService.getAllPeople();
        }
      }
    },

    { 
      name: 'people.person', 
      url: '/{personId}', 
      component: 'person',
      resolve: {
        person: function(people, $stateParams) {
          return people.find(function(person) { 
            return person.id === $stateParams.personId;
          });
        }
      }
    }
  ]

  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});

但是，当创建大型应用程序时，我们可能有很多状态。通常状态会调用一个组件，该组件会调用模板并可能使用服务等。

因此，我习惯在单独的 js 文件中定义状态，就像我对组件、模板、服务等所做的那样

所以我可能有例如:

• home.stt.js(针对州)
• home.srv.js(用于服务)
• home.cpt.js(用于组件)
• home.html(用于查看)

这是一个好的做法吗？或者最好将所有状态定义在同一个文件中？

Answer 1

将它们拆分成单独的文件更具可读性、更容易理解和更有组织性。假设您有一个良好的目录结构，因此主要区域将有自己的目录和子目录等，您的状态配置文件可以进入它们以遵循相同的层次结构。

这是我自己在几个大中型项目中的经验，在这些项目中，结构对于易用性非常重要。