angular 模塊化之directive

時間 2019-11-22

標籤 angular 模塊化 directive 欄目 AngularJS 简体版

原文原文鏈接

經過使用directive使頁面模塊化。須要哪部分直接調用便可。本來這些操做須要後端配合，如今前端便可。將本來的html代碼拆爲不一樣的模塊，而後經過directive銜接加載到主頁面中。首先頁面經過directive包含進來，而後從新建一個module，將這個新的module注入到主module中。javascript

主要能夠看directive.js文件中的var app = angular.module("store-directives",[]);css

app.js文件中的var app = angular.module('gemStore', ["store-directives"]);這一句就和上面的那句正好對應上，將store-directives注入到了主模塊中html

另外，別忘了將directive.js文件在html的主文件中進行加載。前端

關於directive的具體用法EAC和templateUrl，與html對應的關係等等具體這裏就不說了。java

補充說明：bootstrap

angular中爲了js書寫規範和清晰，建議用(function(){})();包住本來的代碼。後端

ng-include也能夠直接將html引入到主頁面中，進行模塊化，須要注意的是，ng-include加載進來的模塊的是須要一對雙引號和一對單引號的。即： ng-include="'product-description.html'"app

能夠給controller定義別名，這樣頁面中調用的值能夠經過點別名來加載，這樣有利於模塊化數據，使頁面數據更清晰。一眼便知是哪個模塊的數據。ide

關於別名和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>