AngularJS ui-router (嵌套路由)的简单学习
Posted 那一刻~~~掩护你
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS ui-router (嵌套路由)的简单学习相关的知识，希望对你有一定的参考价值。
今天让我们一起来学习一下AngularJS里的嵌套路由。
ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可以做路由嵌套和视图命名的特性，嵌套路由功能主要是依赖$stateProvider服务,$urlRouterProvider服务与 ui-view实现。.
首先我们先使用AngularJS框架来创建简单的html和javascript页面。
我们需要创建的文件有一下这些：
1.先创建主体页面 main.html
2.嵌套路由页面 page.html
3.在创建三个子页面 page1.html 、 page1.html 、 page1.html
注意：在使用这个方法时，记得要引入angular-ui-route.js插件哦！
main.html
创建页面如下：
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [\'ui.router\']); // 依赖$stateProvider服务与$urlRouterProvider服务 app.config(function ($stateProvider, $urlRouterProvider) { }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div>//必填 </body> <html>
Page.html
创建页面如下：
<div>
<span style="padding-right: 20px" ><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ><a href="javascript:;">Page-3</a></span>
</div>
Page1.html
创建页面如下：
<!--子页面1-->
<div>
<div>
<h1>Page 子页面1</h1>
</div>
</div>
Page2.html
创建页面如下：
<!--子页面2-->
<div>
<div>
<h1>Page 子页面2</h1>
</div>
</div>
Page3.html
创建页面如下：
<!--子页面3-->
<div>
<div>
<h1>Page 子页面3</h1>
</div>
</div>
以上还是个开始，主体页面main.html还没有嵌套page.html页面，接下来先把page.html页面嵌套在其中吧。
此时main.html
创建页面如下：（红色部分为新加内容）
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title>
<style>
body{
background: #cc9900;
}
</style>
<script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [\'ui.router\']); // 依赖$stateProvider服务与$urlRouterProvider服务 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); //这一行定义了会在main.html页面第一个显示出来的状态，作为页面被加载好以后第一个被使用的路由. $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div> </body> <html>
效果图：（现在的链接还未添加内容）
接下来完善一下Page.html
创建页面如下：
<div>
<span style="padding-right: 20px" ui-sref=".Page1"><a href="javascript:;">Page-1</a></span>
<span style="padding-right: 20px" ui-sref=".Page2"><a href="javascript:;">Page-2</a></span>
<span style="padding-right: 20px" ui-sref=".Page3"><a href="javascript:;">Page-3</a></span>
</div>
<div ui-view=""/></div>
最后我们把main.html修改完整，让在 Page-1 或者 Page-2 再或者 Page-3 菜单上点击的时候需要页面在占位标记那里显示出来。
【完整的main.html】
<!DOCTYPE html> <html ng-app="mk"> <head> <title></title> <script src="libs/angular.min.js"></script> <script src="libs/angular-ui-route.js"></script> <script> var app = angular.module("mk", [\'ui.router\']); // 依赖$stateProvider服务与$urlRouterProvider服务 app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.when("", "/Page"); $stateProvider .state("Page", { url: "/Page", templateUrl: "Page.html" }) // Page下的page1 .state("Page.Page1", { url:"/Page1", templateUrl: "Page1.html" }) .state("Page.Page2", { url:"/Page2", templateUrl: "Page2.html" }) .state("Page.Page3", { url:"/Page3", templateUrl: "Page3.html" }); }); </script> </head> <body data-ng-app="myApp"> <h1>路由嵌套的主体页-----AngularJS Home Page (Ui-router)</h1> <div ui-view=""></div> </body> <html>
好了，AngularJS里的嵌套路由到现在就全部实现了，你们快点在自己的本上运行一下吧！
以上是关于AngularJS ui-router (嵌套路由)的简单学习的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS“多重路由”嵌套模块——AngularJS“路由”嵌套学习资料教程