你的位置:首页 > Java教程

[Java教程]angular 的ng

通过ng-view和ngRouter控制页面显示内容:

html:

 1 <body ng-app="AngularStore"> 2 <div > 3   <div > 4     <div > 5       <h1 > 6         <a href="default.html"> 7           <img src="/images/loading4.gif" data-original="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   }]);