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中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
随机推荐
- Reflection
Reflection 反射能在运行时获取一个类的全部信息,并且可以调用类方法,修改类属性,创建类实例. 而在编译期间不用关心对象是谁 反射可用在动态代理,注解解释,和反射工厂等地方. -------- ...
- 十八、AWT绘图技术
1.Graphics 实现各类图形.文本和图片的绘制操作. 2.绘图颜色和笔画属性 (1)颜色属性 Color col= new Color(int r,int g,int b) Color col ...
- Git 忽略文件
在Git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 .gitignore 文件的方法.这个文件每一行保存了一个匹配的规则例如: # 此为注释 – 将被 Git 忽略 *.a ...
- 使用bootstrap框架的模态框与ckeditor产生冲突，ckeditor的弹出窗不可用时的解决方法
这样可以解决冲突 $.fn.modal.Constructor.prototype.enforceFocus = function () { modal_this = this $(document) ...
- javascript this在事件中的应用
this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它. function dosomething(){ this.style.color="#fff ...
- i2c设备驱动移植笔记（二）
说明:上一篇博客写了我在移植android驱动之TEF6606的苦逼遭遇,即驱动层向应用层提供接口支持,查找了两天的资料,不得不放弃,转而进行IIC下移植RTC设备的实验. 第一步:查找设备的数据手册 ...
- python抓取数据 常见反爬虫 情况
1.报文头信息: User-Agent Accept-Language 防盗链 上referer 随机生成不同的User-Agent构造报头 2.加抓取等待时间 每抓取一页都让它随机休息几秒,加入此 ...
- Java 内存分配全面浅析
本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的学习Java.这类文章网上有很多,但大多比较零碎.本文从认知过程角度出发,将带给读者一个系统的介绍. 进入正题前首先要知道的是Java程 ...
- CMD规范（通用模块定义规范）（翻译）
最近在使用sea.js.大家知道sea.js遵循CMD规范.该规范的英文说明很简洁,我试着翻译了一下,旨在交流. Common Module Definition 通用模块定义规范 This spec ...
- C#窗体 LISTVIEW
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...