文件列表：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. JavaScript 简介及语法语句

    JS脚本语言 全称JavaScript:网页里面使用的脚本语言                      非常强大的语言 基础语法 注释语法    单行注释//    多行注释/**/输出语法     ...

  2. TypeScript入门-基本数据类型

    ▓▓▓▓▓▓ 大致介绍 TypeScript是由C#语言之父Anders Hejlsberg主导开发的一门编程语言,TypeScript本质上是向JavaScript语言添加了可选的静态类型和基于类的 ...

  3. ConversionService接口

    spring已经为我们提供了一个既可以使用GenericConversionService,又可以注入Converter的类,那就是ConversionServiceFactoryBean.该类为我们 ...

  4. 在Android中使用am和input命令在实际使用中的注意事项以及小技巧

    在Android使用到am和进行一些操作是非常方便的,比如一个重复自动的操作,具体用来实现一些什么是看个人需求了,接下来说对于am和input的使用. 本文适用于已经大概去了解了am和input的朋友 ...

  5. 设计模式(一)—单例模式

    一.概述 1.单例模式的优点      由于单例模式只生成一个实例,减少了系统性能的开销,当一个对象的产生需要比较多的资源时,如读取配置,产生其他依赖对象时,则可以通过在应用启动时直接产生一个单例对象 ...

  6. JavaWeb总结(十)—文件上传和下载

    一.文件的上传 1.文件的基本上传 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择 ...

  7. dotNet的体系结构介绍

    一.公共语言运行库 .NET Framework 的核心是其运行库执行环境,称为Common Language Run,通常在CLR控制下运行的代码称为托管代码(由GC进行资源管理和回收),还有一部分 ...

  8. 分布式部署网站---文件系统的存储--ftp上传图片到指定文件服务器

    问:通常一个网站程序发布在一个iis服务器上,但是如果要分布式部署网站.文件系统该如何存储呢? 答:通常的就是给网站文件系统一个子域名.比如 https://images.web.com. 网站程序内 ...

  9. 用MPLAB IDE编程时，软件总是弹出一个窗口提示： “the extended cpu mode configuration bit is enabled,but the program that was loaded was not built using extended cpu instructions. therefore,your code may not work properly

    用MPLAB IDE编程时,软件总是弹出一个窗口提示:"the extended cpu mode configuration bit is enabled,but the program ...

  10. zepto.js介绍

    是一个阉割版的jQuery zepto不支持jQuery过于复杂的选择器,比如:first :last :eq zepto如果要用动画必须再次引包 zepto能将css3中transition支持的动 ...