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服务定义新的路由 例 ...
随机推荐
- JS中有关对象的继承以及实例化、浅拷贝深拷贝的奥秘
一.属性的归属问题 JS对象中定义的属性和方法如果不是挂在原型链上的方法和属性(直接通过如类似x的方式进行定义)都只是在该对象上,对原型链上的没有影响.对于所有实例共用的方法可直接定义在原型链上这样实 ...
- eclipse扩容
-vmD:/jdk-6u17-windows-i586/jdk1.6.0_17/bin/javaw.exe-startupplugins/org.eclipse.equinox.launcher_1. ...
- [Oracle]同义词（synonym）
(一)同义词的概念 同义词是数据库中表.视图.索引或其他模式对象的别名,与视图相似,同义词不占用实际的存储空间,在数据字典中只存同义词的定义. 在开发数据库时,应尽量避免直接引用表.视图或其他数据库对 ...
- 一种类似Retrofit声明接口即可实现调用的WebApi客户端框架
为.Net出力 java有okhttp,还在okhttp这上搞了一个retrofit,.net有HttpClient,但目前我没有发现有类似的retrofit框架.最近在搞mqtt的webApi封装, ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- python 之tornado 入门
#!/usr/bin/env python # -*- coding:utf-8 -*- # --------------------------------------- # email : gen ...
- Intellj IDEA 简易教程
Intellj IDEA 简易教程 目录 JDK 安装测试 IDEA 安装测试 调试 单元测试 重构 Git Android 其他 参考资料 Java开发IDE(Integrated Developm ...
- 使用关系型数据库作为Redis落地的思路
Redis的持久化方式主要有2种:RDB和AOF,但各有不足,同时Redis没有SQL支持,Redis本身提供的命令不足以实现大多数SQL查询需求,对后期运营的分析需求支撑不足.此外,对于游戏来说,活 ...
- 老李秘技：loadrunner回放脚本错误提示Error: "HTTP Status-Code 500"
老李秘技:loadrunner回放脚本错误提示Error: "HTTP Status-Code 500" 当脚本回放的时候出现错误提示Error: "HTTP Sta ...
- 在IIS上部署你的ASP.NET Core项目
概述 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,IIS则是作为反向代理的角色转发请求到Kest ...