CODEWITHSUNDEEP
angularjsangular-ui-router
jensengar
jensengar

Reputation: 6167

AngularJS UI-Router Change States Of Dependent Modules

So I am exploring different configuration options for my app. My main goal is to find a way to configure the states/routes on the highest level even if dependent angular modules have their own routes/states declared. There are several options I have come up with but I'm not sure if they are possible or not:

Assume I have module1 which is dependent on module2

1: If module2 declares its own states/routes, is there a way I can delete or override them from module1?

2: Is there a way I can get a list of recommended states (objects that represent states such as {name: 'state', templateURL: '/someURL'} and use module1 to logically determine which stateObjects to give the $stateProvider?

3: Is it possible to access the stateProvider NOT in the config? For example, say I have the following that gets setup in the config:

tinkModule.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('create', {
        url: '/create',
        templateUrl: 'templates/create.html'
    });
    $stateProvider.state("otherwise", {
        url: "/otherwise",
        templateUrl: 'templates/tinkOtherwise.html'
    });
    $urlRouterProvider.otherwise('/otherwise');
});

Can I add a 'review' state after they have been through the create state?

Please let me know if there are other options that I am not thinking about and also let me know if any of the above is possible.

Upvotes: 2

Views: 2349

Answers (1)

Tim Kindberg
Tim Kindberg

Reputation: 3625

Sounds like your main goal is to define states across modules and also lazy load states. There is some existing features to accomplish these.

Register states across various modules: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-ui-router-from-multiple-modules

You'll need to build 0.3.0 manually with grunt though: https://github.com/angular-ui/ui-router#developing

Then if you want to lazy load (define states on-the-fly) you can read about the $stateNotFound event: https://github.com/angular-ui/ui-router/wiki#state-change-events

And look at the ui-router test for lazy loading: https://github.com/angular-ui/ui-router/blob/master/test/stateSpec.js#L196-L208

The test shows how you might try to go to an undefined state, get the $stateNotFound error, which allows you to define the missing state at that time. It will always try once more to find the state, assuming that you may have defined it in the error callback.

Upvotes: 3

Related Questions