首页 > 代码库 > 路由-when-resolve

路由-when-resolve

2024-09-16 08:41:59   219人阅读

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

 

路由-when-resolve


联系
我们