AngularJS路由系列(1)--基本路由配置
本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：
● 使用caseInsensitiveMatch属性，禁止大小写敏感
AngularJS路由系列包括：
1、AngularJS路由系列(1)--基本路由配置
2、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
3、AngularJS路由系列(3)-- UI-Router初体验
4、AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
5、AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
6、AngularJS路由系列(6)-- UI-Router的嵌套State
项目文件结构
node_modules/
public/
.....app/
..........bower_components/
...............toastr/
....................toastr.min.css
....................toastr.min.js
...............jquery/
....................dist/
.........................jquery.min.js
...............angular/
....................angular.min.js
...............angular-ui-router/
....................release/
.........................angular-ui-router.min.js
...............angular-route/
.........................angular-route.min.js
..........controllers/
...............HomeController.js
...............AllSchoolsController.js
...............AllClassroomsController.js
...............AllActivityiesController.js
...............ClassroomController.js
...............ClassroomSummaryController.js
...............ClassroomMessageController.js
..........css/
...............bootstrap.cerulean.min.css
..........filters/
...............activityMonthFilter.js
..........services/
...............dataServices.js
...............notifier.js
..........templates/
...............home.html
...............allSchools.html
...............allClassrooms.html
...............allActivities.html
...............classroom.html
...............classroomDetail.html
...............classroom_parent.html
..........app.js
.....index.html
.....favicon.ico
server/
.....data/
.....routes/
.....views/
.....helpers.js
package.json
server.js
安装Web Server
node server.js
Listening on port:3000
访问路径：localhost:3000/#/
获取ngRoute模块
bower install angular-route#1.4.0
或
npm install angular-route@1.4.0
或
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js
或
https://code/angularjs.org/1.4.0/angular-route.js
如何使用呢？
在项目中引用angular-route.js,设置对ngRoute这个module的依赖(var app = angular.module('app',['ngRoute']))，在视图中添加ng-view这个directive(<div ng-view></div>)。
Big Picture
在了解路由之前，有必要知道路由在整个AnuglarJS中所扮演的角色，如下：
$routeProvider配置路由
大致按如下配置：
(function(){
var app = angular.module('app',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
controller: 'HomeController',
contrllerAs: 'home',
templateUrl: 'app/templates/home.html'
});
}])
}());
■ index.html
bootstrap.cerulean.min.css
toastr.min.css <!--Angular-->
angular.min.js
angular-route.min.js <!--Application-->
app.js <!--Services-->
dataServices.js
notifier.js <!--Filters-->
activityMonthFilter.js <!--Controls-->
HomeController.js
AllSchoolsController.js
AllClassroomsController.js
AllActivityiesController.js
ClassroomController.js
ClassroomSummaryController.js
ClassroomMessageController.js <body ng-app="app">
<a href="#/">School Buddy</a> <a href="#/schools">Schools</a>
<a href="#/classrooms">Classrooms</a>
<a href="#/activities">Activities</a> <div ng-view></div>
</body>
app.js，第一次添加路由，使用template属性
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
template: '<h1>This is an inline template</h1>'
});
}]);
}());
app.js,使用templateUrl属性
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
});
}]);
}());
■ home.html
{{home.message}}
{{home.schoolCount}}
{{home.activityCount}}
■ app.js,添加更多的路由
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
})
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html'
})
.when('/classrooms',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
})
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
});
}]);
}());
点击导航栏上的Schools
点击导航栏上的Classrooms
点击导航栏上的Activities
app.js, 添加redirectTo属性,接受字符串
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
})
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html'
})
.when('/classrooms',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html',
redirectTo: '/schools'
})
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
});
}]);
}());
点击Classrooms导航到Schools下
app.js, 添加redirectTo,接受函数
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
})
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html'
})
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html',
redirectTo: function(params, currPath, currSearch){
console.log(params);
console.log(currPath);
console.log(currSearch);
return '/';
}
})
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
});
}]);
}());
在浏览器输入：localhost:3000/#/classrooms/1?foo=bar
可见，路由参数1被放在了params中，是一个object对象；/classrooms/1被放在了currPath中；foo=bar查询字符串被放在了currSearch中了，是一个object对象。
app.js, 禁止大小写敏感，使用caseInsensitiveMatch属性
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
})
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
})
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
})
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
});
}]);
}());
localhost:3000/#/schools和localhost:3000/#/SCHOOLS能得到相同的结果。
app.js, 当用户输入的uri无效导航到默认页,使用otherwise属性
(function(){
var app = angular.module('app', ['ngRoute']);
app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
$logProvider.debugEnabled(true);
$routeProvider
.when('/',{
controller: 'HomeController' ,
controllerAs: 'home',
templateUrl: '/app/templates/home.html'
})
.when('/schools',{
controller: 'AllSchoolsController',
controllerAs: 'schools',
templateUrl: '/app/templates/allSchools.html',
caseInsensitiveMatch: true
})
.when('/classrooms/:id',{
controller: 'AllClassroomsController',
controllerAs: 'classrooms',
templateUrl: '/app/templates/allClassrooms.html'
})
.when('/activities',{
controller: 'AllActivitiesController',
controllerAs: 'activities',
templateUrl: '/app/templates/allActivities.html'
})
.otherwise('/');
}]);
}());
未完待续~~
AngularJS路由系列(1)--基本路由配置的更多相关文章
- AngularJS路由系列(6)-- UI-Router的嵌套State
本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- 第三百八十四节，Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册
第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...
- Bing Maps进阶系列四：路由功能服务（RouteService）
Bing Maps进阶系列四:路由功能服务(RouteService) Bing Maps提供的路由功能服务(RouteService)可以实现多方位的计算地图上的路线指示,路径行程等功能,比如说实现 ...
随机推荐
- InteliJ IDEA 简单使用：配置项目所需jdk
1:配置项目所需jdk: File->Project Structure 弹出如下界面: 首先选中SDKs,会出现下图界面:点击“+”标志弹出Add New SDK 然后选择JDK,会弹出路径框 ...
- Jmeter遇到Connection reset by peer的解决方法
解决方案如下: 1.修改HTTP请求下面的Impementation选项,改成HttpClient4 2.修改了/bin/jmeter.bat文件:找到这2行 set HEAP=-Xms256m -X ...
- 解决C/C++语言中全局变量重复定义的问题
前言 今天,在整理自己的代码的时候,考虑到我写的代码从一至终都是在一个cpp文件里面.于是,想把自己的代码中的各个模块分离开来,以便更好地阅读和管理. 遇到的问题 我的做法是: 宏定义.结构体定义.函 ...
- css-实现图标在输入框中显示
一:JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有 ...
- linux下安装redis及其中遇到的问题的解决方法
1.将下载好的压缩包放到/usr/local目录下# tar xzf redis-3.0.2.tar.gz # cd redis-3.0.2 # make 提示错误 make: cc: Command ...
- java iterator(迭代器)
任何容器类,都必须有某种方式可以插入元素并将它们再次取出,毕竟持有事物是容器最基本的工作,对于List,add()插入fang,get()取出,如果从更高层的角度思考,会发现这里有个确定:要用容器,必 ...
- MyEclipse、IDEA常用快捷键
一.MyEclipse快捷键 1. ctrl+shift+r:打开资源这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字 ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- Java编程的逻辑 (45) - 神奇的堆
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- MVC 6 电商网站开发实战
[原创] ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API 标签: Web API MVC6 创建web API | 博主:powertoolsteam ASP.NE ...