通过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 }]);
新闻热点
疑难解答