先创建一个主程序文件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. WebX框架学习笔记之二----框架搭建及请求的发起和处理

    框架搭建 执行环境:windows.maven 执行步骤: 1.新建一个目录,例如:D:\workspace.注意在盘符目录下是无法执行成功的. 2.执行如下命令: mvn archetype:gen ...

  2. Docker镜像压缩

    一.Dockerfile合理分层 Dockerfile的写法不合理,有时候会导致镜像膨胀,由于Docker是分层设计,而在Dockerfile中,每一条指令都拥有自己的context,而执行到下一条指 ...

  3. Access中的自定义排序设置方式

    一.问题起因 最近有网友提问说,Access中在用查询指定排序方式时,为什么只有升序跟降序,怎么米有自定义排序了?竟然比Excel都弱啊! 其实这是对Access的误解,我这就给大家来解一下疑惑.案例 ...

  4. 解析新浪微博表情包的一套js代码

    本文出自本人原创,转载请注明出处 /** * Created by Lemon on 2017/4/6. *//** * return 解析后的值 * analysis 参数 * obj.value: ...

  5. poj 2369 Permutations (置换入门)

    题意:给你一堆无序的数列p,求k,使得p^k=p 思路:利用置换的性质,先找出所有的循环,然后循环中元素的个数的lcm就是答案 代码: #include <cstdio> #include ...

  6. Uva 11609 Teams (组合数学)

    题意:有n个人,选不少于一个人参加比赛,其中一人当队长,有多少种选择方案. 思路:我们首先C(n,1)选出一人当队长,然后剩下的 n-1 人组合的总数为2^(n-1),这里用快速幂解决 代码: #in ...

  7. ggplot2：分面的介绍

    1.分面 分面是指在一个页面上自动摆放多幅图形的技巧,也就是说可以让不同分类的图同时展示在一张图上,这样方便于数据之间的的比较.ggplot2提供了网格型(facet_grid)和封装型(facet_ ...

  8. 国付宝ecshop,shopex,shopnc在线支付接口，php版本支付接口开发

    最近应一个客户的要求,给他的一个ecshop商城开发国付宝在线支付接口.国付宝估计大家比较陌生,但是他集成了很多银行的一些网银接口,所以比较方便.号称国家级的第三方支付平台.最近有增加了域名验证,就是 ...

  9. RabbitMQ配置与安装

    最近这几天身体不舒服,脖子痛的厉害,可能是上月太累了好久没写博客了,之前也说了公司的.Net项目部做了,改用Scale来做,原本想着会用java来搞,所以上个月在拼命的学java,这几天一直脖子不舒服 ...

  10. OC 常见面试题以及答案

    一. #improt 和include区别?@class? 1.include 主要用用来引用C 文件  import 主要引用OC 头文件  import 确保一个文件只能被导入一次  避免了交叉编 ...