在上一篇文章【 AnglularJS】——几大核心特性(一)中,分享了AngularJS的两个特性:MVC和ng的模块化。今天介绍一下ng的路由机制。
1、AngularJS路由介绍
AngularJS路由功能主要实现一个视图跳转的功能,合理管理用户在使用过程中看到的界面。通过路由的设置,根据当前访问的URL展示对应的视图。
ng的路由机制是靠ngRoute提供的,是一个单独的模块,包含以下内容:
§ 服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射
§ 服务$routeParams保存了地址栏中的参数,例如{id : 1, name : 'yxm'}
§ 服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller
§ 指令ngView用来在主视图中指定加载子视图的区域
2、ng路由使用
1)添加:index.html
index页是主页面,包含ng-app和视图ng-view以及所有需要的引用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>routeTest</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="itoo-basic-choosecourse">
<ion-nav-view></ion-nav-view>
</body>
</html>
2)增加:/templates/tabs.html
这个页面是布局页面,是HTML的代码片段,通过这些按钮,可以进入相应的详细页面
<ion-tabs class="tabs-icon-top tabs-color-active-balanced">
<ion-tab title="已选课程" icon-on="ion-star" icon-off="ion-star" ui-sref="tab.selectedCourses">
<ion-nav-view animation="slide-left-right" name="tab-selectedCourses">已选课程</ion-nav-view>
</ion-tab>
<ion-tab title="学生选课" icon-on="ion-pie-graph" icon-off="ion-pie-graph" ui-sref="tab.chooseCourses">
<ion-nav-view animation="slide-left-right" name="tab-chooseCourses">学生选课</ion-nav-view>
</ion-tab>
<ion-tab title="学生退课" icon-on="ion-person" icon-off="ion-person" ui-sref="tab.dropCourses">
<ion-nav-view animation="slide-left-right" name="tab-dropCourses">学生退课</ion-nav-view>
</ion-tab>
</ion-tabs>
3)增加/templates/detail.html
这个是内容模板,通过不同的URL进行加载访问
<div class="bar bar-header bar-balanced">
<h1 class="title">学生退课</h1>
</div>
<ion-content class="padding">
<br>
<br>
<div class="list">
<div class="item item-avatar calm-bg">
<img src="img/影视文学.jpg">
<h2>影视文学</h2>
<p>时间:周三</p>
<p>剩余人数:35</p>
</div>
<div class="item item-avatar PaleGreen-bg">
<img src="img/鬼谷子.jpg">
<h2>鬼谷子</h2>
<p>时间:周五</p>
<p>剩余人数:50</p>
</div>
<div class="item item-avatar">
<img src="img/影视文学.jpg">
<h2>影视文学</h2>
<p>时间:周三</p>
<p>剩余人数:35</p>
</div>
<div class="item item-avatar">
<img src="img/鬼谷子.jpg">
<h2>鬼谷子</h2>
<p>时间:周五</p>
<p>剩余人数:50</p>
</div>
</div>
</ion-content>
4)/js/route.js
添加的route,对页面跳转进行配置。angularjs提供了when和otherwise两个方法来定义路由。用config函数在特定的模块或应用中定义路由。
angular.module('itoo-basic-choosecourse.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//如果是tab状态被激活,加载tabs.html模板,注意这里的abstract:true
//表示tab只有在子状态显示的时候,它才显示,它本身是无法主动被激活的
.state("tab", {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
//tab.message状态被激活,会显示tab-message.html模板,tab.message状态
//是在tabs.html中的ui-sref中设置的。
//同时注意views中的tab-message名字,这个也需要跟tabs.html中的ion-nav-view中的name一致
.state('tab.selectedCourses', {
url: '/selectedCourses',
views: {
'tab-selectedCourses': {
templateUrl: 'templates/tab-selectedCourses.html',
controller: "selectedCoursesCtrl"
}
}
})
//退课路由跳转,当url是dropCourses的时候,则跳转到templates/detail.html
.state('tab.dropCourses', {
url: '/dropCourses',
views:{
'tab-dropCourses':{
templateUrl: "templates/detail.html",
controller: "dropCoursesCtrl"
}
}
})
//选课路由跳转,当url是chooseCourses的时候,则跳转到templates/chooseCourses.html 未建立此测试页
.state('tab.chooseCourses', {
url: '/chooseCourses',
views:{
'tab-chooseCourses':{
templateUrl: "templates/tab-chooseCourses.html",
controller: "chooseCoursesCtrl"
}
}
})
//默认状态时tab.message
$urlRouterProvider.otherwise("/tab/selectedCourses");
});
实现效果:
3、ng-view显示解析
ngView指令遵循以下规则:
1、每次路由转换时触发$routeChangeSuccess事件,视图都会更新。
2、如果某个模版同当前的路由相关联:创建一个新的作用域。移除上一个视图,同时上一个作用域也会被清楚。
将新的作用域同当前摹本关联在一起。
如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来。
触发$viewContentLoaded事件。
如果提供了onload属性,调用该属性所指定的函数。
------------------------------写在最后--------------------------
AngularJS还在处于不断积累阶段,欢迎各种大牛指教。