入口 agtest.html
<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="lib/angular-1.4.0/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-1.4.0/angular-route.js"></script>
<script src="testApp.js"></script>
</head>
<body ng-app="testApp" style="width: 100%;height: 100%;">
<ul>
<li><a href="#a">A</a>
<li><a href="#b">B</a>
</ul>
<div ng-view style="width: 100%;height: 100%;">
</div>
</body>
</html>
testApp.js
/**獲得全局app對象*/
var testApp = angular.module('testApp', [ 'ngRoute']);
/**配置路由器*/
testApp.config(function($routeProvider,$locationProvider,$httpProvider) {
$routeProvider
.when('/a', {
templateUrl : 'a.html',
controller : 'AController'
})
.when('/b', {
templateUrl : 'b.html',
controller : 'BController'
})
});
testApp.controller('AController', function($scope) {
$scope.info="Page A";
});
testApp.controller('BController', function($scope) {
$scope.info="Page B";
});
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
</head>
<body style="width: 100%;height: 100%;">
<label style="color: #f00;">{{info}}</label>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
</head>
<body style="width: 100%;height: 100%;color: #f00;" >
<label style="color: #f0f;">{{info}}</label>
</body>
</html>
運行結果：
點擊A
點擊B
