首页 > 网站 > WEB开发 > 正文

angular 的ng-view,ngrouter

2024-04-27 14:11:21
字体:
来源:转载
供稿:网友
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 Store10             </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:storeController11             })12             .when('/products/:productSku',{                               13                 templateUrl:'partials/product.html',14                 controller:storeController15             })16             .when('/cart',{17                 templateUrl:'partials/shoppingCart.html',18                 controller:storeController19             })20             .otherwise({21                 redirectTo:'/store'22             });23     }]);


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表