angular 的ng-view，ngrouter

最新推荐文章于 2020-12-01 08:16:44 发布

weixin_30781433

最新推荐文章于 2020-12-01 08:16:44 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ethy/p/4386239.html

版权

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     }]);