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中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
随机推荐
- html回忆（一）
1. 解决乱码,告诉浏览器 当前文档类型和编码 <meta http-equiv="Content-Type" content="text/html; charse ...
- GMF中，删除节点和连线的另一种实现
问题 在GMF中,如果需要programmatically删除节点或连线,在google中我们很容易搜索到<GMF中,删除节点和连线的实现>一文(我并不确定这是原创作者的原始链接),很多人 ...
- Java Code Examples for PhantomJSDriverService
Example 1 Project: thucydides File: PhantomJSCapabilityEnhancer.java View source code Vote up 6 vo ...
- ZIP等
file命令可以查看文件的类型 tar类型 .targzip类型 .gz bzip2类型 .bz2zip类型 .zip 如果一个压缩文件由tar命令解压的前提,2个条件1.这个文件必须是由tar打包之 ...
- CSS3的chapter1
初学CSS3的第一天,虽然之前有接触过CSS,不过好像是CSS2,我也上网了解了一下CSS3,新增了很多强大的元素,也让我更有兴趣去学习了. CSS(Cascading Style Sheets) 层 ...
- CentOS 7 最小化安装的网络配置
默认的最小化安装CentOS 7系统以后,是没有ipconfig这个命令的,依赖于net-tools工具包. 一.nmtui 这是一个类似于图形化的命令(和setup类似) 通过这个组件窗口可以设置各 ...
- 利用excel拆分数据
要求:将sheet1中的数据按照公司名称拆分到不同的工作表 使用VBA: 1:打开sheet1的查看代码 2:运行 ·········································· ...
- 【Android】设置 LinearLayout 的样式
前言 LinearLayout是最常用的控件之一,主要是用来进行排版布局,本人介绍如何给LinearLayout 增加边框样式,在增加样式之前的效果如下: 可以看得出来,每个LinearLayout几 ...
- Ubuntu 16.04 + Caffe
主要参考: https://github.com/BVLC/caffe/wiki/Ubuntu-16.04-or-15.10-Installation-Guide http://caffe.berke ...
- java高薪之路__002_异常处理
自定义异常 package learn.JavaBasics.Class; import java.util.Date; /** * 如何自定义一个异常类 * 1. 继承一个现有的异常类 * 2. 提 ...