通过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 }]);
查看更多关于angular 的ng-view，ngrouter的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222748