angular 的ng-view,ngrouter

通过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)