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

本文介绍了使用 angular-ui-router 以角度创建嵌套路由应用程序并在模块之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

在ui-router"中，我们可以在我们的主应用配置中使用多视图作为$stateProvider，但是当你在子模块之间不能切换其他模块.

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.

例如，当您在module1"中时，您不能声明为module2".

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

那么，如何在我的模块之间切换?

So, How can I switch between my modules?

推荐答案

在这个应用程序中，您可以轻松地在子模块之间进行路由:

In this application you can route between sub modules easily:

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

创建index.html"为您的主应用程序:

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>

创建您的部分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"在您的主应用程序中

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

创建您的子模块

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"中添加子模块状态

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

这篇关于使用 angular-ui-router 以角度创建嵌套路由应用程序并在模块之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！