routeProvider路由的使用
先创建一个主程序文件index.html,内容如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<div>
<ng-view></ng-view>
</div>
</body>
<script src="angular.js" type="text/javascript" charset="utf-8"></script>
<script src="angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
</html>
其中angular.js和angular-route.js自行下载（本示例用的版本为1.5.8）
然后创建app.js文件，代码如下：
angular.module("myApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/home/:a", {
//解析模板
templateUrl: "home.html",
controller: "homeController"
});
$routeProvider.when("/user/:n", {
templateUrl: "user.html",
controller: "userController"
});
//未定义时的默认路由，这个路由将会跳转到/home:a，undefined作为aaa传入
//此处写/home/,/home,/home/:a，都不行
$routeProvider.otherwise("/home/undefined");
}])
.controller("homeController", function($scope, $location,$routeParams) {
$scope.mainModel = {
"name": $routeParams.a
};
$scope.mainModel.goToUserView = function() {
//replace防止浏览器通过历史记录回到该页面
$location.path("/user/" + $scope.mainModel.name).replace();
}
})
.controller("userController", function($scope, $location, $routeParams) {
$scope.mainModel = {
goBack : function() {
$location.path("/home/" + $scope.mainModel.name);
//当没有replace时可以通过下面的方式后退
//window.history.go(-1);
},
name: $routeParams.n
};
})
home.html:
<h1>home</h1>
<p>我的名字：{{mainModel.name}}</p>
<input type="text" ng-model="mainModel.name"/>
<button ng-click="mainModel.goToUserView()">按钮</button>
user.html:
<h1>user</h1>
<p>我的名字：{{mainModel.name}}</p>
<input type="text" ng-model="mainModel.name" />
<button ng-click="mainModel.goBack()">返回</button>
routeProvider路由的使用的更多相关文章
- agularJs 路由
angularJs的路由方式: 先定义一个模板ng-app-->然后定义路由的规则(routeProvider)在服务config里-->然后通过不同的URL实现 到单页面加载的所需页面的 ...
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- AngularJS 路由及SPA理解
一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...
- angular（3）服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
- [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
- 30分钟快速掌握AngularJs
[后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs 一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来 ...
- 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)
chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...
- angularjs --- ngResource 类似于 ajax发送请求。
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- angular路由详解：
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
随机推荐
- YARN 命令总结
起因:YARN 使用capability schedule queue调度container,spark 的app卡死在YARN的队列里面无法出来,无奈请教大神时,可用[yarn applicatio ...
- python生成二维码
1.python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode 库. 首先,我们要安装三个模块,qrcode,image,PIL. pip install q ...
- jqzoom插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- Linux之tr命令
tr - translate or delete characters 删除或替换文字信息 参数: -d 删除字符串 -s 删除重复的字符串只保留一个 [root@BASE ~]# cat c.t ...
- java入门了解02
1:JDK,JRE,JVM的作用关系 (一)作用 JVM:提供java跨平台 JRE:java运行环境 JDK:java开发环境 ...
- java之泛型解说
1.集合中只能装入引用数据类型,不能装入基本数据类型.如,装入int类型的数值123会自动装箱. 2.开发人员装入集合的数据类型不确定,所以它被设计成可以装入所有的Object. 3.新的问题产生,装 ...
- git 入门宝典
本篇教程是按照我自己的组织方式,然后从多篇教程中拼凑出来的,嘎嘎~,真佩服自己的技术! 原本想叫 git 宝典的,结果一查git的命令大全,还有那么多的git命令与功能没有接触到,所以...还是谦虚一 ...
- Oracle DQL查询语言整理
select * from t_hq_ryxx; select nianl, xingm from t_hq_ryxx; select nianl as 年龄, xingm as 姓名 from t_ ...
- [原]C#与非托管——封送和自动封送
之前说到了如何从C函数声明通过简单的查找替换生成一份C#的静态引用声明(C#与非托管——初体验),因为只是简单说明,所以全部采用的是基础类型匹配和自动封送.自动封送虽然能省去我们不少编码时间,但如果不 ...
- 老李谈JVM内存模型
老李谈JVM内存模型 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨 ...