文件列表：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());
})