angularjs - Creating nested route app in angular using angular-ui-router and switching between modules

Question

I want to create angular nested routes in my application using angular-ui-router with multi sub-modules;

In "ui-router" we can use multi views in our main app config as $stateProvider, but can't switch between sub-modules when you are in other module.

For example when you are in "module1" you can not state to "module2".

So, How can I switch between my modules?

Answer 1

In this application you can route between sub modules easily:

1. Create main application "mainApp.js"

   angular.module("mainApp", [
     "ui.router"
   ]);
   
   angular.module("mainApp").config([
     "$stateProvider", "$urlRouterProvider",
     function($stateProvider, $urlRouterProvider) {
   
       $urlRouterProvider.otherwise("/");
   
       $stateProvider
         .state("/", {
           url: "/",
           templateUrl: "/Application/Partials/home.html"
         });
     }
   ]);