Is it possible to let submodules in AngularJS control their own routing using ui-router?

Question

Here's the scenario:

I have a main AngularJS app that uses ui-router for routing, like any other app. I also have a smaller AngularJS module that functions as its own app, not requiring that it be a submodule of my larger app.

I would like for the smaller app to handle its own routing and templating, too. Goal here being, the mini app can be loaded by another AngularJS app, or loaded on its own, and have all its routing and templates set up already.

Main App:

  angular
    .module('mainApp')
    .config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('mainAppParent', {
          url: '/',
          templateUrl: 'main.html',
          controller: 'mainCtrl',
          controllerAs: 'vm'
        })
        .state('mainAppParent.miniJournalApp', {
          url: '/journal'
        });
     }]);

Mini App:

  angular
    .module('miniJournalApp')
    .config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('mainJournalState', {
          url: '/',
          templateUrl: 'mainJournalView.html',
          controller: 'JournalCtrl',
          controllerAs: 'vm'
        })
        .state('newEntry', {
          url: '/new'
        });
     }]);

I'm planning on having all the components of the mini app being an AngularJS .component(), so I'm wondering if the correct way to do this is to just let the parent app handle routing, and let the mini app handle the templates when I define each component/directive. Then, when I want to load the mini app on its own, I would just write a wrapper AngularJS module with new routing.

selftaught91 · Accepted Answer · 2016-08-17 07:23:06Z

1

As we can see that in angular ui router we are using $stateProvider so basically we are using a provider.

In an angular app the provider is loaded once and then angular puts the instance in cache so next time when the provider is injected somewhere then same instance is used.

As same instance of $stateProvider is used across angular app so it is perfectly fine to define separate states for submodules.

And this is a good practice for code maintenance.

I have used it in many projects

answered Aug 17, 2016 at 7:23

selftaught91

7,5313 gold badges25 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Is it possible to let submodules in AngularJS control their own routing using ui-router?

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