通过使用directive使页面模块化。需要哪部分直接调用即可。原本这些操作需要后端配合，现在前端即可。将原本的html代码拆为不同的模块，然后通过directive衔接加载到主页面中。首先页面通过directive包含进来，然后重新建一个module，将这个新的module注入到主module中。
主要可以看directive.js文件中的var app = angular.module("store-directives",[]);
app.js文件中的var app = angular.module('gemStore', ["store-directives"]);这一句就和上面的那句正好对应上，将store-directives注入到了主模块中
另外，别忘了将directive.js文件在html的主文件中进行加载。
关于directive的具体用法EAC和templateUrl，与html对应的关系等等具体这里就不说了。
补充说明：
angular中为了js书写规范和清晰，建议用(function(){})();包住原本的代码。
ng-include也可以直接将html引入到主页面中，进行模块化，需要注意的是，ng-include加载进来的模块的是需要一对双引号和一对单引号的。即： ng-include="'product-description.html'"
可以给controller定义别名，这样页面中调用的值可以通过点别名来加载，这样有利于模块化数据，使页面数据更清晰。一眼便知是哪一个模块的数据。
关于别名和controller，别名和controller都可以直接写到directive中，具体的代码看directive.js文件中productGallery和productTabs这两个directive便知。全部完整的代码已经全部贴出。
index.html部分：
<!DOCTYPE html> <html ng-app="gemStore"> <head> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="directive.js"></script> </head> <body ng-controller="StoreController as store"> <!-- Store Header --> <header> <h1 class="text-center">Flatlander Crafted Gems</h1> <h2 class="text-center">– an Angular store –</h2> </header> <!-- Products Container --> <div class="list-group"> <!-- Product Container --> <div class="list-group-item" ng-repeat="product in store.products"> <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3> <!-- Image Gallery --> <product-gallery></product-gallery> <!-- Product Tabs --> <product-tabs></product-tabs> </div> </div> </body> </html>
app.js部分：
(function() { var app = angular.module('gemStore', ["store-directives"]); app.controller('StoreController', function(){ this.products = gems; }); app.controller('ReviewController', function() { this.review = {}; this.addReview = function(product) { product.reviews.push(this.review); this.review = {}; }; }); var gems = [{ name: 'Azurite', description: "Some gems have hidden qualities beyond their luster, beyond their shine... Azurite is one of those gems.", shine: 8, price: 110.50, rarity: 7, color: '#CCC', faces: 14, images: [ "images/gem-02.gif", "images/gem-05.gif", "images/gem-09.gif" ], reviews: [] }, { name: 'Bloodstone', description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.", shine: 9, price: 22.90, rarity: 6, color: '#EEE', faces: 12, images: [ "images/gem-01.gif", "images/gem-03.gif", "images/gem-04.gif", ], reviews: [] }, { name: 'Zircon', description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.", shine: 70, price: 1100, rarity: 2, color: '#000', faces: 6, images: [ "images/gem-06.gif", "images/gem-07.gif", "images/gem-08.gif" ], reviews: [] }]; })();
directive.js
(function() { var app = angular.module("store-directives",[]); app.directive("productDescription", function() { return { restrict: 'E', templateUrl: "product-description.html" }; }); app.directive("productReviews", function() { return { restrict: 'E', templateUrl: "product-reviews.html" }; }); app.directive("productSpecs", function() { return { restrict:"A", templateUrl: "product-specs.html" }; }); app.directive("productTabs", function() { return { restrict: "E", templateUrl: "product-tabs.html", controller: function() { this.tab = 1; this.isSet = function(checkTab) { return this.tab === checkTab; }; this.setTab = function(activeTab) { this.tab = activeTab; }; }, controllerAs: "tab" }; }); app.directive("productGallery", function() { return { restrict: "E", templateUrl: "product-gallery.html", controller: function() { this.current = 0; this.setCurrent = function(imageNumber){ this.current = imageNumber || 0; }; }, controllerAs: "gallery" }; }); })();
product-description.html
<!-- Description Tab's Content --> <div ng-show="tab.isSet(1)"> <h4>Description</h4> <blockquote>{{product.description}}</blockquote> </div>
product-reviews.html
<!-- Product Reviews List --> <ul> <h4>Reviews</h4> <li ng-repeat="review in product.reviews"> <blockquote> <strong>{{review.stars}} Stars</strong> {{review.body}} <cite class="clearfix">—{{review.author}}</cite> </blockquote> </li> </ul> <!-- Review Form --> <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> <!-- Live Preview --> <blockquote > <strong>{{reviewCtrl.review.stars}} Stars</strong> {{reviewCtrl.review.body}} <cite class="clearfix">—{{reviewCtrl.review.author}}</cite> </blockquote> <!-- Review Form --> <h4>Submit a Review</h4> <fieldset class="form-group"> <select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars"> <option value>Rate the Product</option> </select> </fieldset> <fieldset class="form-group"> <textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Write a short review of the product..." title="Review"></textarea> </fieldset> <fieldset class="form-group"> <input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" /> </fieldset> <fieldset class="form-group"> <input type="submit" class="btn btn-primary pull-right" value="Submit Review" /> </fieldset> </form>
product-specs.html
<!-- Spec Tab's Content --> <h4>Specs</h4> <ul class="list-unstyled"> <li> <strong>Shine</strong> : {{product.shine}}</li> <li> <strong>Faces</strong> : {{product.faces}}</li> <li> <strong>Rarity</strong> : {{product.rarity}}</li> <li> <strong>Color</strong> : {{product.color}}</li> </ul>
product-tabs.html
<!-- Tabs Go Here --> <section> <ul class="nav nav-pills"> <li ng-class="{ active:tab.isSet(1) }"> <a href ng-click="tab.setTab(1)">Description</a> </li> <li ng-class="{ active:tab.isSet(2) }"> <a href ng-click="tab.setTab(2)">Specs</a> </li> <li ng-class="{ active:tab.isSet(3) }"> <a href ng-click="tab.setTab(3)">Reviews</a> </li> </ul> <!-- Description Tab's Content --> <product-description ng-show="tab.isSet(1)" ></product-description> <!-- Spec Tab's Content --> <div product-specs ng-show="tab.isSet(2)"></div> <!-- Review Tab's Content --> <product-reviews ng-show="tab.isSet(3)"></product-reviews> </section>
product-gallery.html
<div ng-show="product.images.length"> <div class="img-wrap"> <img ng-src="{{product.images[gallery.current]}}" /> </div> <ul class="img-thumbnails clearfix"> <li class="small-image pull-left thumbnail" ng-repeat="image in product.images"> <img ng-src="{{image}}" /> </li> </ul> </div>