在角采用了棱角分明的UI路由器创建嵌套航线应用和模块之间切换 [英] Creating nested route app in angular using angular-ui-router and switching between modules

查看：206
本文介绍了在角采用了棱角分明的UI路由器创建嵌套航线应用和模块之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想用角UI路由器多子模块建立在我的应用角度嵌套的航线;

在UI路由器我们可以用在我们的主应用程序配置为$ stateProvider多的观点，但是当你在其他模块的子模块之间不能进行切换。

例如，当你在模块1你不能说出要模块2。

所以，我怎么能模块之间切换？


解决方案

在这个程序，你可以子模块之间的航线伊斯利：

1 - 创建应用程序主mainApp.js

\r
\r

angular.module（mainApp，[\r
  ui.router\r
]）;\r
\r
angular.module（mainApp）。配置（[\r
  $ stateProvider，$ urlRouterProvider，\r
  功能（$ stateProvider，$ urlRouterProvider）{\r
\r
    $ urlRouterProvider.otherwise（/）;\r
\r
    $ stateProvider\r
      .STATE（/，{\r
        网址：/，\r
        templateUrl：/Application/Partials/home.html\r
      }）;\r
  }\r
]）;

\r

\r
\r

2 - 创建index.html的为您mainApp：

\r
\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=mainApp＆GT;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;标题＆GT;角嵌套路线与安古拉-UI-路线和LT; /标题＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
  ＆LT;＆字段集GT;\r
    ＆LT;传奇＆GT;主菜单＆LT; /传说＆GT;\r
    ＆LT;一个UI的SREF =/＆GT;家庭和LT; / A＆GT;\r
  ＆LT; /字段集＆GT;\r
\r
  ＆LT; UI的视图＆gt;＆LT; / UI的视图＆gt;\r
\r
  ＆LT;脚本的src =/脚本/ jQuery的-2.1.4.js＆GT;＆LT; / SCRIPT＆GT;\r
  ＆LT;脚本的src =/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;\r
  ＆LT;脚本的src =/脚本/角-UI-router.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
  ＆LT;！ - 主模块 - ＆GT;\r
  ＆LT;脚本的src =/应用/ app.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

3 - 创建局部变量home.html做为

\r
\r

＆LT; H1＆GT;首页＆LT; / H1＆GT;

\r

\r
\r

4-添加reg​​isterStateApp在您的项目

\r
\r

angular.module（registerStateApp，[]）;\r
angular.module（registerStateApp）。供应商（$ registerState功能（$ stateProvider）{\r
  VAR状态= [];\r
  这一点。$ =设置功能（stateProvider）{\r
    VAR satetProviders = {\r
      声明：stateProvider\r
    }\r
    state.push（satetProviders）;\r
  };\r
  这一点。$ GET =功能（）{\r
    返回angular.forEach（州，功能（路线）{\r
      angular.forEach（route.states，函数（州）{\r
        $ stateProvider.state（state.state，{\r
          名称：state.name，\r
          网址：state.url，\r
          templateUrl：state.templateUrl，\r
          观点：state.views\r
        }）;\r
      }）;\r
    }）;\r
  };\r
}）;

\r

\r
\r

5更新mainApp.js＆放大器;在主应用程序注入registerStateApp

\r
\r

angular.module（mainApp，[\r
  ui.router\r
  registerStateApp\r
]）;\r
\r
angular.module（mainApp）。配置（[\r
  $ stateProvider，$ urlRouterProvider，$ registerStateProvider，\r
  功能（$ stateProvider，$ urlRouterProvider，$ registerStateProvider）{\r
    \r
    $ urlRouterProvider.otherwise（/）;\r
    \r
    // registerStateApp\r
    $ registerStateProvider $ get（）方法。\r
    \r
    //你的主要应用途径\r
    $ stateProvider\r
      .STATE（/，{\r
        网址：/，\r
        templateUrl：/Application/Partials/home.html\r
      }）;\r
  }\r
]）;

\r

\r
\r

6创建子模块

\r
\r

angular.module（模块1，[]）;\r
\r
angular.module（模块1）。配置（[$ registerStateProvider\r
  功能（$ registerStateProvider）{\r
\r
    //这是你的子模块中的路由\r
    变种stateProvider = [{\r
      名称：模块1\r
      状态：module1.page1\r
      网址：/模块1\r
      观点：{\r
        模块1：{\r
          templateUrl：/Application/Modules/Module1/Partials/page1.html\r
        }\r
      }\r
    }];\r
\r
    $ registerStateProvider $集（stateProvider）。\r
  }\r
]）;\r
\r
//模块2\r
angular.module（模块2，[]）;\r
\r
angular.module（模块2）。配置（[$ registerStateProvider\r
  功能（$ registerStateProvider）{\r
    变种stateProvider = [{\r
      名称：模块2\r
      状态：module2.page1\r
      网址：/模块2\r
      观点：{\r
        模块2：{\r
          templateUrl：/Application/Modules/Module2/Partials/page1.html\r
        }\r
      }\r
    }];\r
\r
    $ registerStateProvider $集（stateProvider）。\r
  }\r
]）;

\r

\r
\r

7，创建子模块的主视图

\r
\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=模块1＆GT;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;标题＆GT;模块1＆LT; /标题＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
  ＆所述; H1＆gt;这是模块1＆下; / H1＆GT;\r
  ＆LT;按钮的UI SREF =module2.page1＆GT;转到MODULE2页面1 LT; /按钮＆GT;\r
\r
  ＆LT;格UI视图=模块1＆GT;＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;\r
\r
＆LT;！ - 模块2 - ＆GT;\r
\r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=模块2＆GT;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;标题＆GT;模块2＆LT; /标题＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
  ＆所述; H1＆gt;这是模块2＆下; / H1＆GT;\r
  ＆LT;按钮的UI SREF =module1.page1＆GT;去到Module页面1 LT; /按钮＆GT;\r
\r
  ＆LT;格UI视图=模块2＆GT;＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

8添加子模块的状态在主应用mainApp.js

\r
\r

angular.module（mainApp，[\r
  ui.router\r
  registerStateApp\r
  模块1\r
  模块2\r
]）;\r
\r
angular.module（mainApp）。配置（[\r
  $ stateProvider，$ urlRouterProvider，$ registerStateProvider，\r
  功能（$ stateProvider，$ urlRouterProvider，$ registerStateProvider）{\r
    $ urlRouterProvider.otherwise（/）;\r
    $ registerStateProvider $ get（）方法。\r
    $ stateProvider\r
      .STATE（/，{\r
        网址：/，\r
        templateUrl：/Application/Partials/home.html\r
      }）\r
      .STATE（模块1，{\r
        网址：/模块1\r
        templateUrl：/Application/Modules/Module1/index.html\r
      }）\r
      .STATE（模块2，{\r
        网址：/模块2\r
        templateUrl：/Application/Modules/Module2/index.html\r
      }）;\r
  }\r
]）;

\r

\r
\r

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 i can switch between modules?

解决方案

In this application you can route between sub modules easly:

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

这篇关于在角采用了棱角分明的UI路由器创建嵌套航线应用和模块之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆