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中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...
随机推荐
- easylui datagrid 动态生成列
function load(sdate) { $.getJSON("workorder/statistics.do", { sdate : sdate+'-01' }, funct ...
- 【转】稍改进过的ListView，很好用哈
using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; using ...
- 【RabbitMQ】RabbitMQ在Windows的安装和简单的使用
版本说明 使用当前版本:3.5.4 安装与启动 在官网上下载其Server二进制安装包,在Windows上的安装时简单的,与一般软件没什么区别. 安装前会提示你,还需要安装Erlang,并打开下载页面 ...
- 405 Method Not Allowed
今天在发布一个网站的时候遇到 标题上的问题,一直不明白是为何,刚开始以为是我的程序写的有问题,随即将项目发给同事来发布试试,在他的IIS上发布却没出现问题,一切正常,这可就怪了,于是想到了应该是IIS ...
- php 中的常量
1.__FINE__ 返回当前常量所在的行号. 2.__FILE__ 返回文件的完整路径和文件名. 3.__FUNCTION__ 返回函数名称. 4.__CLASS__ 返回类名称. 5.__METH ...
- sql_树形查询
with Subqry(FID,A_TypeName,A_ParentID) as (select FID,A_TypeName,A_ParentID from tb_Appliances where ...
- Linux基本操作1 - 设备操作
Linux开发的过程中,肯定会使用到很多设备,所以对设备的挂载卸载是一个很基本的操作. Linux对设备的默认定义如下: 一.Linux中的硬件设备号 设 备 设 备 号 ...
- CSS3之尖角标签
如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...
- 深入浅出设计模式——装饰模式（Decorator Pattern）
模式动机 一般有两种方式可以实现给一个类或对象增加行为: 继承机制,使用继承机制是给现有类添加功能的一种有效途径,通过继承一个现有类可以使得子类在拥有自身方法的同时还拥有父类的方法.但是这种方法是静 ...
- 关于js touch事件 的引用设置
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...