anjularjs 路由
在多视图单页面web应用中，angularjs使用路由‘#+标记’来区别不同的逻辑页面并将不同的页面绑定到对应的控制器上。通过一个简单的实例来深入理解：
1.index.html
主页面中插入代码：
<div ng-view></div>
该div内的html内容会根据路由的变化而变化。
(Tips:除了基本框架需要引入外，需要引入实现路由的js文件： ../angular-route.min.js)
<!DOCTYPE html>
<html lang="zh-CN" ng-app="webapp">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<style>
body {font-size:20px;}
.ng-scope {
margin: 10px;
padding:10px;
}
</style>
</head>
<body> <div ng-view></div> <script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/demo.js"></script> </body>
</html>
2.ctrl1.html
第一个html模板文件
<div>I am ctrl1.html</div>
<div>{{Ctrl1Var}}</div>
<div ng-include="'views/links.html'"></div>
3.ctrl2.html
第二个html模板文件
<div>I am ctrl2.html</div>
<div>{{Ctrl2Var}}</div>
<div ng-include="'views/links.html'"></div>
4.ctrl3.html
第三个html模板文件
<div>I am ctrl3.html</div>
<div>{{Ctrl3Var}}</div>
<div ng-include="'views/links.html'"></div>
5.links.html
默认的html模板文件
<ul class="list-unstyled">
<li><a href="#/ctrl1">ctrl1</a></li>
<li><a href="#/ctrl2">ctrl2</a></li>
<li><a href="#/ctrl3">ctrl3</a></li>
<li><a href="#/nonsense">nonsense</a></li>
</ul>
6.index.js
1） 引入ngRoute作为主应用模块的依赖模块;
2） angularjs的config模块用来配置路由规则，通过configAPI，请求把$routeProvider注入到我们的配置函数，然后使用$routeProvider.whenAPI来定义路由规则，when（path,object)&otherwise(object)按顺序定义我们的所有路由，其中函数的两个参数：path为URL或者URL正则规则，object则为路由配置对象，查阅资料，完整的object如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明
•template:若ng-view中插入的只是简单的HTML代码，则使用
.when('/computers',{template:'这是ctrl1页面'})
•templateUrl:若在ng-view中插入HTML模板文件，则使用
$routeProvider.when('/computers', {
templateUrl: 'views/strl1.html',
});
•controller:可以是function,string或者数组类型，这表示在当前模板上执行的controller函数，生成新的scope.
•controllerAs:string类型，为controller指定别名。
•redirectTo:重定向的地址。
•resolve:指定当前controller所依赖的其他模块。
angular.module("webapp",[
"ngRoute"
]);
angular.module("webapp").config(['$routeProvider',function ($routeProvider) {
$routeProvider.when('/ctrl1', {
templateUrl: 'views/ctrl1.html',
controller: 'Ctrl1'
})
.when('/ctrl2', {
templateUrl: 'views/ctrl2.html',
controller: 'Ctrl2'
})
.when('/ctrl3', {
templateUrl: 'views/ctrl3.html',
controller: 'Ctrl3'
})
.otherwise({
redirectTo: '/ctrl1'
});
}]);
angular.module('webapp').controller('Ctrl1' , ['$scope',function($scope) {
$scope.Ctrl1Var = 'Ctrl1Var';
}]);
angular.module('webapp').controller('Ctrl2' , ['$scope',function($scope) {
$scope.Ctrl2Var = 'Ctrl2Var';
}]);
angular.module('webapp').controller('Ctrl3' , ['$scope',function($scope) {
$scope.Ctrl3Var = 'Ctrl3Var';
}]);
相关实例演示链接：http://dreammaker-8-16-qboooogle.c9users.io:8080/
anjularjs 路由的更多相关文章
- anjularjs简介
1 什么时候该用AngularJS AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅 ...
- 详解 anjularjs的ui-route（多视图、视图嵌套、视图传参）
最近整理了一下anjularjs的第三方插件ui-route,在这就以一个demo的形式讲解一下.整片博客均以开头的demo代码为例.下边是个目录,大家可以酌情直接跳转浏览. 1. demo的代码 2 ...
- Ionic-wechat项目边开发边学（二）：目录结构，header标签与路由
之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复! 摘要 上一篇文章主要介绍了ionic的开发环境配置, 以及 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- .NetCore MVC中的路由（2）在路由中使用约束
p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- ASP.NET路由模型解析
大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
随机推荐
- Designing a CSS based template
http://veerle-v2.duoh.com/blog/comments/designing_a_css_based_template_part_i/
- [多校联考2 T3] 排列 (DP)
DP Description 对于一个排列,考虑相邻的两个元素,如果后面一个比前面一个大,表示这个位置是上升的,用 I 表示,反之这个位置是下降的,用 D表示.如排列 3,1,2,7,4,6,5 可以 ...
- ACID
ACID:数据库事务正确执行的四个基本要素的缩写. ACID,指数据库事务正确执行的四个基本要素的缩写. 包含:原子性(Atomicity) 一致性(Consistency) 隔离性(Isolatio ...
- abort终止正在进行中的的ajax请求
核心:调用XMLHttpRequest对象上的abort方法 jQuery的ajax方法有自己的超时时间设置参数: $.ajax({type:'POST', url:'b.php', data:' ...
- php上传绕过
URL:http://www.ichunqiu.com/section/45 php语言除了可以解析以php为后缀的文件,还可以解析php2.php3.php4.php5这些后缀的文件.
- docker-registry使用笔记
在国内docker-hub是肯定用不了的,不解释:sweat:. 所以最好还是建一个私有的docker-registry,存储一些常用的images方便随时pull. 相关链接 github:http ...
- mongoDB 数据导出与导入
一.导出 命令格式:在mongodb/bin目录下 mongoexport -h IP --port 端口 -u 用户名 -p 密码 -d 数据库 -c 表名 -f 字段 -q 条件导出 --csv ...
- mysql 命令（一）
1. 函数向日期添加指定的时间间隔 DATE_ADD(date,INTERVAL expr type)eg:DATE_ADD(CURDATE(),INTERVAL 1 MONTH) //在当前时间加一 ...
- USACO2007Monthly Expense月度开销
Description Farmer John是一个令人惊讶的会计学天才,他已经明白了他可能会花光他的钱,这些钱本来是要维持农场每个月的正常运转的.他已经计算了他以后N(1<=N<=100 ...
- Php数据类型之整型详解
php中支持的数据类型 在php中主要支持8种数据类型.和3中伪类型的一个形式.8种数据类型分为以下三3大类,第一个就是我们的标量类型,标量类型它只能存储单一数据,那第二大类就是我们的复合类型,第三个 ...