通过ng-view和ngRouter控制页面显示内容:

html:

 <body ng-app="AngularStore">
<div class="container-fluid">
<div class="row-fluid">
<div class="span10 offset1">
<h1 class="well">
<a href="default.html">
<img src="img/logo.png" height="60" width="60" alt="logo" alt=""/>
</a>
Angular Store
</h1>
<div ng-view></div>
</div>
</div>
</div>

js:

 var storeApp = angular.module('AngularStore', ['ngRoute'])                  //新版本的angular必须添加'ngRouter',也需要引用ng-router.js
.config(['$routeProvider', function ($routeProvider){
$routeProvider
.when('/',{ //此种情况,在ng-view处将会显示partials/store.html中的内容
templateUrl:'partials/store.html',
controller:storeController
})
.when('/store',{ //此种情况,在ng-view处将会显示partials/store.html中的内容,下面的根据路径显示不同内容
templateUrl:'partials/store.html',
controller:storeController
})
.when('/products/:productSku',{
templateUrl:'partials/product.html',
controller:storeController
})
.when('/cart',{
templateUrl:'partials/shoppingCart.html',
controller:storeController
})
.otherwise({
redirectTo:'/store'
});
}]);
05-07 15:49
查看更多