ngRoute进行视图的切换，同一个主页面中部分内容或者整个页面的切换，关键看 ng-view 的位置。
1、主html代码：
<!DOCTYPE html>
<html ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-view>这里的内容在变</div>
<div>不变</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/appbooks.js" ></script>
<script type="text/javascript" src="js/controllers.js"></script>
</html>
2、JS配置页面代码：
var bookStoreApp = angular.module('bookStoreApp',[
'ngRoute', 'bookStoreCtrls'
]);
bookStoreApp.config(function($routeProvider){
$routeProvider.when('/hello',{
templateUrl:'angular/hello.html',
controller:'HelloCtrl'
}).when('/list',{
templateUrl:'angular/bookList.html',
controller:'BookListCtrl'
}).when('/xyy',{
templateUrl:'angular/yyXu.html',
controller:'YYXuCtrl'
}).otherwise({
redirectTo:'/hello'
})
});
3、JS Controller文件：
var bookStoreCtrls = angular.module('bookStoreCtrls',[]);
bookStoreCtrls.controller('HelloCtrl',['$scope',
function($scope){
$scope.greeting = {
text:'Hello'
};
}
]);
bookStoreCtrls.controller('BookListCtrl',['$scope',
function($scope){
$scope.books = [
{title:'《Ext江湖1》',author:"大漠穷秋"},
{title:'《Ext江湖2》',author:"大漠穷秋"},
{title:'《Ext江湖3》',author:"大漠穷秋"}
]
}
]);
bookStoreCtrls.controller('YYXuCtrl',['$scope',
function($scope){
$scope.yyXuData=[
{name:'YYXu', someTitle:'do not know1'},
{name:'YYXu2', someTitle:'do not know2'},
]
}
]);
4、子html代码 以/yyXu.html为例
<table>
<tr ng-repeat="data in yyXuData">
<td>{{data.name}}</td>
<td>{{data.someTitle}}</td>
</tr>
</table>
3671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
