路由-when-resolve

文件列表：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

最新文章

热门文章