routeProvider路由的使用
先创建一个主程序文件index.html,内容如下：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<div>
<ng-view></ng-view>
</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>
其中angular.js和angular-route.js自行下载（本示例用的版本为1.5.8）
然后创建app.js文件，代码如下：
angular.module("myApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/home/:a", {
//解析模板
templateUrl: "home.html",
controller: "homeController"
});
$routeProvider.when("/user/:n", {
templateUrl: "user.html",
controller: "userController"
});
//未定义时的默认路由，这个路由将会跳转到/home:a，undefined作为aaa传入
//此处写/home/,/home,/home/:a，都不行
$routeProvider.otherwise("/home/undefined");
}])
.controller("homeController", function($scope, $location,$routeParams) {
$scope.mainModel = {
"name": $routeParams.a
};
$scope.mainModel.goToUserView = function() {
//replace防止浏览器通过历史记录回到该页面
$location.path("/user/" + $scope.mainModel.name).replace();
}
})
.controller("userController", function($scope, $location, $routeParams) {
$scope.mainModel = {
goBack : function() {
$location.path("/home/" + $scope.mainModel.name);
//当没有replace时可以通过下面的方式后退
//window.history.go(-1);
},
name: $routeParams.n
};
})
home.html:
<h1>home</h1> <p>我的名字：{{mainModel.name}}</p> <input type="text" ng-model="mainModel.name"/> <button ng-click="mainModel.goToUserView()">按钮</button>
user.html:
<h1>user</h1> <p>我的名字：{{mainModel.name}}</p> <input type="text" ng-model="mainModel.name" /> <button ng-click="mainModel.goBack()">返回</button>
