文件列表：luyou.html,app.js,home.html,user.html,wy.json

luyou.html

<!DOCTYPE html>

<html ng-app="myApp">

    <head>

        <meta charset="UTF-8">

        <title>angular</title>

    </head>

    <body>

        <div ng-controller="myController">

            <p>我是主界面index.html</p>

            <!--<ng-view></ng-view>-->

            <div ng-view=""></div>

            <!--<div class="ng-view"></div>-->

        </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>

app.js

angular.module("myApp", ["ngRoute"])

    .config(["$routeProvider", "$locationProvider", function($routeProvider,$locationProvider) {

        $routeProvider.when("/", {

            templateUrl: "home.html",

            controller: "homeController",

            resolve: {

                //该对象对应的所有方法和属性都可以注入到控制器中

                //该对象属性所对应的值，必须是服务名

                //函数中的参数必须是服务名

                callBoy: "callBoy",

                getData: function(getD) {

                    return getD;

                }

            },

            //如果值为true，每次查询参数发生改变都会引起路由的刷新，否则不刷新

            reloadOnSearch: false,

        });

            $locationProvider.hashPrefix("!");

        $routeProvider.when("/user/:name/:password", {

            templateUrl: "user.html",

            controller: "userController",

            //重定向

            //            redirectTo:"/user/a/b",

//            redirectTo: function(a, b, c) {

//                //参数1：代表一个对象，对象里面的属性都是路由参数

//                //参数2：路由的路径

//                //参数3：查询参数

//                console.log(a, b, c);

//                return "/home";

//            }

        })

        $routeProvider.otherwise("/");

    }])

    .controller("myController", function($scope) {

        $scope.name = "myCtrl-name";

    })

    .controller("homeController", function($scope, $location, callBoy, getData) {

        $scope.name = "home-name";

        //        console.log(callBoy);

        //        console.log(getData.data);

        var num = Math.floor(Math.random() * 101);

        $scope.homeclick = function() {

            //            $location.path("/user");

            console.log("开始跳转");

            $location.search("password=abc");

            $location.path("/user/张三/abcd");

        };

        $scope.queryFn = function() {

            $location.search("num=" + num);

        }

    })

    .controller("userController", function($scope, $location) {

        $scope.name = "user-name";

        $scope.userclick = function() {

            $location.path("/");

        }

    })

    .factory("callBoy", function() {

        return "d";

    })

    .factory("getD", function($http) {

        return $http({

            method: "get",

            url: "../wy.json",

        })

    })

home.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h1>home</h1>

        <p>我的名字：{{name}}</p>

        <button ng-click="homeclick()">user</button>

        <button ng-click="queryFn()">查询</button>

    </body>

</html>

user.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h1>user</h1>

        <p>我的名字：{{name}}</p>

        <button ng-click="userclick()">返回</button>

    </body>

</html>

****************************************************分割线****************************************************

angular.module("myApp", ["ngRoute"])

    .config(["$routeProvider", function($routeProvider) {

        $routeProvider.when("/home", {

            templateUrl: "home.html",

            controller: "homeController"

        })

        $routeProvider.otherwise("/home");

    }])

    .controller("homeController", function($scope,$location,$window) {

//        $location实际上是对window中location的封装

//        $location没有刷新页面的功能，如果需刷新可以注入$window，

//        使用$windowlocation.reload()方法刷新界面

        $scope.btnAction = function (){

            $window.location.reload();

        }

//        路由路径

        console.log("路由路径:" + $location.path());

        console.log("获取编码后的完整地址:"+ $location.absUrl());

        console.log("主机名:"+$location.host());

        console.log("端口号："+$location.port());

        console.log("协议:"+$location.protocol());

        console.log("设置查询串:"+$location.search("name=zhangsan"));

        console.log("获取路径:"+$location.url());

        console.log("设置路径,查询参数，返回对象:"+$location.url());

    })

路由-when-resolve的更多相关文章

  1. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  2. 路由的Resolve机制（需要了解promise）

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  3. AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...

  4. angular2系列教程（十一）路由嵌套、路由生命周期、matrix URL notation

    今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:

  5. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...

  6. Angular系列文章之angular路由

    路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它自然也有内置的路由模块:叫做ngRoute. ...

  7. Angular4学习笔记（三）- 路由

    路由简介 路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据.这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面. 相关的类 Routes ...

  8. AngularJS路由系列(6)-- UI-Router的嵌套State

    本系列探寻AngularJS的路由机制,在WebStorm下开发.本篇主要涉及UI-Route的嵌套State. 假设一个主视图上有两个部分视图,部分视图1和部分视图2,主视图对应着一个state,两 ...

  9. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  10. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

随机推荐

  1. 苹果ATS特性服务器证书配置指南

    配置指南: 需要配置符合PFS规范的加密套餐,目前推荐配置: ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!AD ...

  2. python3的urllib2报错问题解决方法

    python urlib2 兼容问题 在python3中,将urllib和urllib2合并了,所以在使用urllib2的地方改成urllib.request即可.示例如下 import urllib ...

  3. ajax 原理----初级篇

    一.贴dome,ajax三大步 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. Meta http-equiv属性详解

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变 ...

  5. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  6. 【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法

      好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了 于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下 ...

  7. 解决修改mysql的data_dir所引发的错误

    今天,搭建新购的阿里云ECS环境(ubuntu 16.04 LTS),需要将mysql的数据保存在新挂载的磁盘上(已挂载到/mnt下),先停掉mysql服务,然后查看mysql并数据保存的位置: vi ...

  8. OC--Runtime知识点整理

    1.Runtime简介 因为Objc是一门动态语言,所以它总是想办法把一些决定工作从编译连接推迟到运行时.也就是说只有编译器是不够的,还需要一个运行时系统 (runtime system) 来执行编译 ...

  9. css 多行超长点点点

    超长?不是很好吗?什么?不好?有什么坏处吗?会使人想哭的! 这里来说下,超长点点点的处理: 一行超长点点点,这个很多都会吧! text-overflow: ellipsis; white-space: ...

  10. C#研究OpenXML之路(1-新建工作簿文件)

    一.写在开头 一直想沉下心来研究研究OpenXML编程,可是由于公司编程项目一笔接一笔,很难静下来,所以一直是采用的COM操作Excel.现在终于得闲,特将心得历程记录下来. 今天的第一个实例代码是来 ...