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中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
随机推荐
- bzoj 4415: [Shoi2013]发牌
4415: [Shoi2013]发牌 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 173 Solved: 124[Submit][Status][ ...
- 为ssh增加选项
在使用ssh的时候,可以看到ssh有很多功能,什么-o , -e等等.如下图 需求,想要给ssh增加一个参数的功能.比如说我现在的需求就是执行ssh的时候可以增加一个选项,给我每次ssh的操作搭一个标 ...
- z-index 应用简单总结
做过页面布局的同学对z-index属性应该是很熟悉了,z-index是针对网页显示中的一个特殊属性.因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性.为了表示三维立体的概念如显示元素 ...
- js中attr 与find 获取属性值，
一.attr的用法 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 und ...
- (七)HTTP协议
HTTP协议报文基本格式 HTTP协议报文基本格式 HTTP协议(Hypertext Transfer Protocol――超文本传输协议),浏览器端(客户端)向WEB服务器端访问页面的过 ...
- 如何浏览并管理 Outlook 邮件？
当你的邮件多起来的时候你就不得不考虑这个问题了,如何处理各种邮件? 如何浏览并管理 Outlook 邮件? 待续~
- python核心编程第六章练习6-14
随机数.设计一个“石头.剪子.布”游戏,有时又叫“Rochambeau”,你小时候可能玩过,下面是规则.你和你的对手,在同一时间做出特定的手势,必须是下面一种:石头.剪子.布.胜利者从下面的规则产生, ...
- 51nod 1134 最长递增子序列
题目链接:51nod 1134 最长递增子序列 #include<cstdio> #include<cstring> #include<algorithm> usi ...
- C#窗体 LISTVIEW
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- iOS开发拓展篇—音频处理（音乐播放器3）
iOS开发拓展篇—音频处理(音乐播放器3) 说明:这篇文章主要介绍音频工具类和播放工具类的封装. 一.控制器间数据传递 1.两个控制器之间数据的传递 第一种方法:self.parentViewCont ...