通过使用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>

angular 模块化之directive的更多相关文章

  1. angular Creating a Directive that Adds Event Listeners

    <span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggab ...

  2. Angular 下的 directive （part 2）

    ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现.   该指令可以应用于<body>元素,但首选使用多个ng ...

  3. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  4. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  5. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  6. angular插件制作——Directive指令使用详解

    1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容:  html: <!DOCTYPE html> <html> <head> <me ...

  7. Angular 下的 directive （part 1）

    directive  指令 Directive components  指令部分   使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: < ...

  8. angular之自定义 directive

    1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...

  9. angular controller与directive相互引用

    /** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('fo ...

随机推荐

  1. shell脚本学习（3）文件判断

    shell常用的文件判断运算符如下: -e 文件是否存在 -f  文件是否是普通文件(不是目录.设备文件.链接文件) -s  表示文件大小不为0 -d 表示文件是否是目录 -b 表示是块设备(光驱.软 ...

  2. 腾讯云“动态加速”与“CDN”的区别——浅谈对“动态加速”的理解（可能有误）

    CDN的劣势及“动态加速”产生背景 通常CDN对静态内容支持较好,若使用其加速动态内容,可能会导致异常(如导致无法登录).当然,可以将动态内容的在CDN节点上的缓存时间设置为0秒来解决.但这毕竟是用户 ...

  3. 那些年我用过的SAP IDE

    在Google上根据关键字"程序员鄙视链"搜索,会得到68多万条结果. 玲琅满目的搜索结果里是众多不同维度划分的鄙视链. 其中有一个维度,就是编程工具的鄙视链,比如: 而我在SAP ...

  4. 【LOJ6043】「雅礼集训 2017 Day7」蛐蛐国的修墙方案（搜索技巧题）

    点此看题面 大致题意: 给你一个长度为\(n\)的排列\(p\),要求构造一个合法的括号序列,使得如果第\(i\)个位置是左括号,则第\(p_i\)个位置一定是右括号. 暴搜 很容易想出一个暴搜. 即 ...

  5. Python 连接、操作数据库

    使用python3+pymysql 一.安装python3 a)         从网上下载安装吧 二.安装pymysql https://pypi.python.org/pypi/PyMySQL h ...

  6. Python 数据驱动 unittest + ddt

    一数据驱动测试的含义: 在百度百科上的解释是: 数据驱动测试,即黑盒测试(Black-box Testing),又称为功能测试,是把测试对象看作一个黑盒子.利用黑盒测试法进行动态测试时,需要测试软件产 ...

  7. Thread 创建线程

    1.该线程变量 无参数 我们可以把线程的变量 理解为一个 委托.可以指向一个方法.有点像c语言中的指向函数的指针. 第1步我们创建了 Thread变量t1 ,第2步创建了一个方法threadChild ...

  8. npy数据的保存与读取

    保存 利用这种方法,保存文件的后缀名字一定会被置为.npy x = numpy.save("data_x.npy",x) 读取 data = numpy.load("da ...

  9. 等待唤醒机制，UDP通信和TCP通信

    等待唤醒机制 通过等待唤醒机制使各个线程能有效的利用资源. 等待唤醒机制所涉及到的方法: wait() :等待,将正在执行的线程释放其执行资格 和 执行权,并存储到线程池中. notify():唤醒, ...

  10. web的监听器，你需要知道这些...

    一.简介 Listener是Servlet规范的另一个高级特性,它用于监听java web程序的事件,例如创建.修改.删除session,request,context等,并触发相应的处理事件,这个处 ...