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

燕智

2023-03-14

问题内容：

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

index.html为您的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

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

        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在angular中创建嵌套的路由应用程序并在模块之间切换

相关阅读

相关文章

相关问答

相关工具

相关文档