angularjs – 使用angular-ui-router以及在模块之间切换,以角度创建嵌套路由应用程序

我想在我的应用程序中使用带有多个子模块的angular-ui-router创建角度嵌套路由;

在“ui-router”中,我们可以在主应用程序配置中使用多视图作为$stateProvider,但是当您在其他模块中时,不能在子模块之间切换.

例如,当您处于“module1”时,您无法声明为“module2”.

那么,我如何在模块之间切换？

在此应用程序中,您可以轻松地在子模块之间路由

>创建主应用程序“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"
      });
  }
]);

>为mainApp创建“index.html”：

<!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>

>创建您的部分“home.html”

<h1>Home</h1>

>在项目中添加“registerStateApp”

angular.module("registerStateApp",[]);
angular.module("registerStateApp").provider("$registerState",function ($stateProvider) {
    var routes = [];

    this.$set = function (stateProvider) {
        var satetProviders = {
            states: stateProvider
        }

        routes.push(satetProviders);
    };

    this.$get = function () {
        return angular.forEach(routes,function (route) {
            angular.forEach(route.states,function (state) {
                $stateProvider.state(state.state,{
                    parent: state.parent,moduleName: parent,stateName: child,name: state.pageName,url: state.url,views: state.views,pageInfo: state.pageInfo
                });
            });
        });
    };
});

>更新“mainApp.js”&在主应用程序中注入“registerStateApp”

angular.module("mainApp",[
  "ui.router","registerStateApp"
]);

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

>创建子模块

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

>创建子模块主视图

<!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>

>在主应用程序“mainApp.js”中添加子模块状态

angular.module("mainApp","registerStateApp","module1","module2"
]);

angular.module("mainApp").config([
  "$stateProvider",$registerStateProvider) {
    $urlRouterProvider.otherwise("/");
    $registerStateProvider.$get();
    $stateProvider
      .state("/",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"
      });
  }
]);

angularjs – 使用angular-ui-router以及在模块之间切换,以角度创建嵌套路由应用程序

猜你在找的Angularjs相关文章