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服务定义新的路由 例 ...
随机推荐
- Java之路——环境配置与编译运行
本文大纲 一.开篇 二.JDK下载 三.JDK安装 四.环境配置 五.初识Java编译 六.Java与Javac 七.第一个Java程序 八.总结 九.参考资料 一.开篇 通过对之前Java之路的了解 ...
- bcache 状态/配置 文件详细介绍
什么是bcache bcache是linux内核块层cache.它使用类似SSD来作为HDD硬盘的cache,从而起到加速作用. HDD硬盘便宜并且空间更大,SSD速度快但更贵.如果能两者兼得,岂不快 ...
- PRINCE2的好处是什么？使用PRINCE2受益非浅
项目管理促进了全球许多公共部门与私营企业的经济活动. 优秀的项目管理意味着使用更少的资源在更短的时间内达到一个成功的结果,经过良好培训的项目经理能够帮助组织更加富有创新力,取得成功. 对那些希望展现自 ...
- 踩坑实录 Android studio中关于 No cached version of **** available for of处理办法
当我们添加某些依赖库(Okhttp.Retrofit)时, Android studio 会报如下错误: Error:A problem occurred configuring project ': ...
- C# Task 源代码阅读（1）
平时我们开发中,经常使用Task,后续的.net版本种很多都和Task有关,比如asyn,await有了Task 我们很少就去关注Thread 了.Task 给我们带来了很多的便利之处.是我们更少的去 ...
- 【HTML5】选项卡
效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
- plist文件的相关操作
本文概要 1.plist文件的简介 2.在Xcode中创建plist文件 3.在Xcode中将plist文件转换成数组或者字典对象 4.将数组或者字典对象转换成plist文件并且存储 详细介绍 1.p ...
- 浅谈如何让 Bootstrap 3兼容IE8浏览器
Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...
- cooking构建工具报错MSBUILD :error MSB4132解决办法
最近学习cooking构建工具的时候,在自己的笔记本上运行的好好的,项目在公司电脑上clone下来的时候,发现构建报错,逐条查错,试了好多方法也不行 最后在github上找到了答案,只是之前一直没找到 ...
- Spring+Redis(keyspace notification)实现定时任务（订单过期自动关闭）
1.起因 最近公司项目要做订单超期未支付需自动关闭,首先想到的是用spring的定时器(@Schedule),结果领导举各种例子说会影响性能,只能作罢.后来想能不能基于redis实现, 学习(baid ...