AngularJS路由实例(uiRoute、ngRoute)
介绍
AngularJS的路由功能使得它能够在一个页面中呈现不同的视图页面。它的做法是将视图分解成布局和模板视图，并且根据用户当前访问的URL来展示对应的视图。
AngularJS 为我们封装好了一个路由工具 ngRoute ,它的实现是对URL进行匹配后去驱动视图页面显示。它也为我们封装了一个独立的路由模块 uiRouter ,它是一种靠状态 state 来驱动视图页面。
效果图
是不是很像App下方的选项卡
实例代码
方式一：ngRoute(匹配URL路径加载对应的视图页面)
home.html
<body>
<div class="home_page">
<div ng-view>div>
<ul>
<li>
<a href="#page1">page1a>
li>
<li>
<a href="#page2">page2a>
li>
<li>
<a href="#page3">page3a>
li>
ul>
div>
body>routeConfig.js
//设置模块与ngRoute的依赖关系
angular.module("ngRouteApp", ["ngRoute"])
.config(['$routeProvider', function($routeProvider){
$routeProvider
//定义路由规则(若URL路径为“/page1”则加载childPage1.html),语法类似switch case default
.when("/page1",{templateUrl : "childPage1.html"})
.when("/page2",{templateUrl : "childPage2.html"})
.when("/page3",{templateUrl : "childPage3.html"})
.otherwise({redirectTo: "/page1"});
}]
);
方式二：uiRoute(根据状态state加载对应的视图页面)
有三种方法来激活状态,并传递参数
- 调用 state.go()方法； state.go(“TabBar.Page1”,{param: ‘value’})
- 点击包含ui-sref指令的链接；ui-sref=”TabBar.Page1({param1:value1})”
- 导航到与状态相对应的URL；
home.html
<body>
<div class="home_page">
<div ui-view="">div>
div>
body>pageTabBar.html
<div class="home_page">
<div ui-view="">div>
<ul>
<li>
<a href="" ui-sref=".Page1">page1a>
li>
<li>
<a href="" ui-sref=".Page2">page2a>
li>
<li>
<a href="" ui-sref=".Page3">page3a>
li>
ul>
div>routeConfig.js
angular.module("uiRouteApp", ["ui.router"])
.config(
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("TabBar/Page1");
$stateProvider
//.state("状态",{url : "URL路径", templateUrl : "html"})
.state("TabBar",{url : "/TabBar", templateUrl : "PageTabBar.html"})
//.state("子状态",{url : "下一级URL路径", templateUrl : "子html页面"})
.state("TabBar.Page1", {url : "/Page1", templateUrl : "childPage1.html"})
.state("TabBar.Page2", {url : "/Page2", templateUrl : "childPage2.html"})
.state("TabBar.Page3", {url : "/Page3", templateUrl : "childPage3.html"})
}
);
视图层级结构
home.html
state:TabBar
"">pageTabBar.html
pageTabBar.html
state: TabBar.Page1
"">childPage1.html
state: TabBar.Page2
"">childPage2.html
state: TabBar.Page3
"">childPage3.html