Angularjs ui-router state definition

Question

In an angular ui-router tutorial, all states are defined in the same js file.

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);
  });
});

However, when creating a large application, we may have a lot of states. And usually a state calls a component that calls a template and probably uses a service and so on.

Therefore, I use to define the state in a separate js file, same as I do for component, template, service, ...

So I may have for example:

home.stt.js (for state)
home.srv.js (for service)
home.cpt.js (for component)
home.html (for view)

Is it a good practice? Or it is better to have all states defined in the same file?

Haha Eddy, you again =) I realy wondering whats going on inside your mind. Your approaches are "different" :P — lin
– lin, Commented Apr 5, 2017 at 14:05

rrd · Accepted Answer · 2017-04-05 13:58:27Z

1

It is more readable, understandable, and organised, to have them split into separate files. Presumably you have a good directory structure, so major areas would have their own directories and sub-directories etc., Your config files for states can go into them to follow the same hierarchy.

This is my own experience from several mid- to large- sized projects where structure is so important for ease-of-use.

answered Apr 5, 2017 at 13:58

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ui-router state definition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related