先创建一个主程序文件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路由的使用的更多相关文章

  1. agularJs 路由

    angularJs的路由方式: 先定义一个模板ng-app-->然后定义路由的规则(routeProvider)在服务config里-->然后通过不同的URL实现 到单页面加载的所需页面的 ...

  2. Angular路由与多视图综合案例

    Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...

  3. AngularJS 路由及SPA理解

    一.路由及SPA理解 路由允许我们通过不同的 URL 访问不同的内容,可实现多视图的单页web应用(SPA);通常我们的URL形式为 http://runoob.com/first/page,但在单页 ...

  4. angular(3)服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

  5. [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  6. 30分钟快速掌握AngularJs

    [后端人员耍前端系列]AngularJs篇:30分钟快速掌握AngularJs   一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来 ...

  7. 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(3)

    chsakell分享了一个前端使用AngularJS,后端使用ASP.NET Web API的项目. 源码: https://github.com/chsakell/spa-webapi-angula ...

  8. angularjs --- ngResource 类似于 ajax发送请求。

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  9. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

随机推荐

  1. Java程序中与MongoDB建立连接~小记

    1.Mongo和MongoClient的关系 MongoClient继承自Mongo,使用Mongo也可建立连接,但是需要使用与Mongo适应的MongoOptions,MongoURI等类型. 2. ...

  2. HTTP协议(三)

    一.首先我们画一个图来看一下HTTP协议: 难道方法只有POST GET吗?NO,还有一些少用的方法. 二.请求方法有哪些? GET POST HEADER PUT TRACE DELETE OPTI ...

  3. 测试开发Python培训:抓取新浪微博评论提取目标数据-技术篇

    测试开发Python培训:抓取新浪微博评论提取目标数据-技术篇   在前面我分享了几个新浪微博的自动化脚本的实现,下面我们继续实现新的需求,功能需求如下: 1,登陆微博 2,抓取评论页内容3,用正则表 ...

  4. ReactJS入门2:组件状态

    React组件可以简单看做是包含props和states的函数. 上一节总结了创建新组建和数据属性的传递.本节主要讲解组件的状态. React认为UI是不同状态的展现.在React中,开发者只需更新组 ...

  5. fixed应用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Hibernate(四)之对象状态及一级缓存

    一.Hibernate中的对象状态 1.1.瞬时态(临时态) 没有与Hibernate产生关联 与数据库中的记录没有产生关联(有关联就是与数据库中表的id相对应) 获得:一般都只直接创建(new) 瞬 ...

  7. Redis基础学习(五)—Redis的主从复制

    一.概述     Redis的主从复制策略是通过其持久化的rdb文件来实现的,其过程是先dump出rdb文件,将rdb文件全量传输给slave,然后再将dump后的操作实时同步到slave中.让从服务 ...

  8. 职责链模式(Chain of Responsibility)的Java实现

    职责链模式(Chain of Responsibility):使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它 ...

  9. java 基础知识五 数组

    java  基础知识五  数组 数组保存的是一组有顺序的.具有相同类型的数据. 同一个数组中所有数据元素的数据类型都是相同的. 可以通过数组下标来访问数组,数据元素根据下标的顺序,在内存中按顺序存放 ...

  10. Jquery对select下拉框的操作

    一.jQuery获取Select选择的Text和Value:语法解释: $("#select_id").change(function(){//code...});   //为Se ...