【AngularJS】——核心特性之路由
|
在上一篇文章【 AnglularJS】——几大核心特性（一）中，分享了AngularJS的两个特性：MVC和ng的模块化。今天介绍一下ng的路由机制。
1、AngularJS路由介绍AngularJS路由功能主要实现一个视图跳转的功能，合理管理用户在使用过程中看到的界面。通过路由的设置，根据当前访问的URL展示对应的视图。
ng的路由机制是靠ngRoute提供的，是一个单独的模块，包含以下内容：
2、ng路由使用1）添加：index.htmlindex页是主页面，包含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指令遵循以下规则：
------------------------------写在最后-------------------------- AngularJS还在处于不断积累阶段，欢迎各种大牛指教。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |