angular 的ng-view,ngrouter

王朝学院·作者佚名  2016-05-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航