通过ng-view和ngRouter控制页面显示内容：
html:
1 <body ng-app="AngularStore"> 2 <div class="container-fluid"> 3 <div class="row-fluid"> 4 <div class="span10 offset1"> 5 <h1 class="well"> 6 <a href="default.html"> 7 <img src="img/logo.png" height="60" width="60" alt="logo" alt=""/> 8 </a> 9 Angular Store 10 </h1> 11 <div ng-view></div> 12 </div> 13 </div> 14 </div>
js:
1 var storeApp = angular.module('AngularStore', ['ngRoute']) //新版本的angular必须添加'ngRouter'，也需要引用ng-router.js 2 .config(['$routeProvider', function ($routeProvider){ 3 $routeProvider 4 .when('/',{ //此种情况，在ng-view处将会显示partials/store.html中的内容 5 templateUrl:'partials/store.html', 6 controller:storeController 7 }) 8 .when('/store',{ //此种情况，在ng-view处将会显示partials/store.html中的内容，下面的根据路径显示不同内容 9 templateUrl:'partials/store.html', 10 controller:storeController 11 }) 12 .when('/products/:productSku',{ 13 templateUrl:'partials/product.html', 14 controller:storeController 15 }) 16 .when('/cart',{ 17 templateUrl:'partials/shoppingCart.html', 18 controller:storeController 19 }) 20 .otherwise({ 21 redirectTo:'/store' 22 }); 23 }]);