Maher Maher - 2 months ago 12
AngularJS Question

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

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

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

  2. Create "index.html" for your mainApp:

    <!DOCTYPE html>
    <html ng-app="mainApp">
    
    <head>
      <title>Angular Nested Routes with angula-ui-route</title>
    </head>
    
    <body>
      <fieldset>
        <legend>main menu</legend>
        <a ui-sref="/">home</a>
      </fieldset>
    
      <ui-view></ui-view>
    
      <script src="/Scripts/jquery-2.1.4.js"></script>
      <script src="/Scripts/angular.js"></script>
      <script src="/Scripts/angular-ui-router.js"></script>
    
      <!--Main Module-->
      <script src="/Application/app.js"></script>
    </body>
    
    </html>
    
     

  3. Create your Partials "home.html"

    <h1>Home</h1>
    
     

  4. Add "registerStateApp" in your project

    angular.module("registerStateApp", []);
    angular.module("registerStateApp").provider("$registerState", function($stateProvider) {
      var state = [];
      this.$set = function(stateProvider) {
        var satetProviders = {
          states: stateProvider
        }
        state.push(satetProviders);
      };
      this.$get = function() {
        return angular.forEach(state, function(route) {
          angular.forEach(route.states, function(state) {
            $stateProvider.state(state.state, {
              name: state.name,
              url: state.url,
              templateUrl: state.templateUrl,
              views: state.views
            });
          });
        });
      };
    });
    
     

  5. Update "mainApp.js" & inject "registerStateApp" in your main application

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

  6. Create your sub-modules

    angular.module("module1", []);
    
    angular.module("module1").config(["$registerStateProvider",
      function($registerStateProvider) {
    
        //This is your routing in sub module
        var stateProvider = [{
          name: "module1",
          state: "module1.page1",
          url: "/module1",
          views: {
            "module1": {
              templateUrl: "/Application/Modules/Module1/Partials/page1.html"
            }
          }
        }];
    
        $registerStateProvider.$set(stateProvider);
      }
    ]);
    
    //module2
    angular.module("module2", []);
    
    angular.module("module2").config(["$registerStateProvider",
      function($registerStateProvider) {
        var stateProvider = [{
          name: "module2",
          state: "module2.page1",
          url: "/module2",
          views: {
            "module2": {
              templateUrl: "/Application/Modules/Module2/Partials/page1.html"
            }
          }
        }];
    
        $registerStateProvider.$set(stateProvider);
      }
    ]);
    
     

  7. Create sub-module main view

    <!DOCTYPE html>
    <html ng-app="module1">
    
    <head>
      <title>module1</title>
    </head>
    
    <body>
      <h1>This is module1</h1>
      <button ui-sref="module2.page1">go to module2 page 1</button>
    
      <div ui-view="module1"></div>
    </body>
    
    </html>
    
    <!--module2-->
    
    <!DOCTYPE html>
    <html ng-app="module2">
    
    <head>
      <title>module2</title>
    </head>
    
    <body>
      <h1>This is module2</h1>
      <button ui-sref="module1.page1">go to module1 page 1</button>
    
      <div ui-view="module2"></div>
    </body>
    
    </html>
    
     

  8. Add your sub-modules state in your main app "mainApp.js"

    angular.module("mainApp", [
      "ui.router",
      "registerStateApp",
      "module1",
      "module2"
    ]);
    
    angular.module("mainApp").config([
      "$stateProvider", "$urlRouterProvider", "$registerStateProvider",
      function($stateProvider, $urlRouterProvider, $registerStateProvider) {
        $urlRouterProvider.otherwise("/");
        $registerStateProvider.$get();
        $stateProvider
          .state("/", {
            url: "/",
            templateUrl: "/Application/Partials/home.html"
          })
          .state("module1", {
            url: "/module1",
            templateUrl: "/Application/Modules/Module1/index.html"
          })
          .state("module2", {
            url: "/module2",
            templateUrl: "/Application/Modules/Module2/index.html"
          });
      }
    ]);