angular 模块化之directive

通过使用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的更多相关文章

angular Creating a Directive that Adds Event Listeners
Drag ME angular.module('dragModule', []) .directive('myDraggab ...
Angular 下的 directive （part 2）
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心认真的学习.angular 特别是自定义指令这块空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战一.指令directive概述指令可以对元素绑定事件监听或者改变DOM结构 ...
angular插件制作——Directive指令使用详解
1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容: html: <!DOCTYPE html> <html> <head> <me ...
Angular 下的 directive （part 1）
directive 指令 Directive components 指令部分使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: < ...
angular之自定义 directive
1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...
angular controller与directive相互引用
/** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('fo ...

随机推荐

IOS 设置ipone状态栏的样式
/** 控制状态栏的样式 */ -(UIStatusBarStyle)preferredStatusBarStyle { //白色 return UIStatusBarStyleLightConten ...
BZOJ 3227: [Sdoi2008]红黑树(tree)
BZOJ 3227: [Sdoi2008]红黑树(tree) 标签(空格分隔): OI-BZOJ OI-其它 Time Limit: 10 Sec Memory Limit: 128 MB Descr ...
如何在Linux中显示和设置主机名
原文链接随着连接到网络的计算机数量越来越多,每一台计算机都需要有一个属性来区别于其它计算机.和现实世界中的人一样,计算机也有一个叫做hostname(主机名)的属性. 什么是hostname 从它的 ...
IBM区块链总经理谈区块链
IBM区块链总经理谈区块链:3.4年前IBM的区块链人员就达到了1500人 Captain Hiro 2018-03-20 16:22 发布在区块链 3 18349 CCN的记者Eric Eiss ...
阿里数据库连接池druid
官方wiki: https://github.com/alibaba/druid/wiki 实用方法介绍的想当详细,包含监控.扩展.大力推荐!
遗忘的html标签
x2+y=10 <span ...
mariadb源码编译安装及多实例
准备文件源文件/app/mariadb-10.2.12.tar.gz cd /app/ tar xf mariadb-10.2.12.tar.gz cd mariadb-10.2.12 mkdir ...
Docker自学纪实(五) 使用Dockerfile构建php网站环境镜像
一般呢,docker构建镜像容器的方式有两种:一种是pull dockerhub仓库里面的镜像,一种是使用Dockerfile自定义构建镜像. 很多时候,公司要求的镜像并不一定符合dockerhub仓 ...
PXE+DHCP+TFTP+Cobbler 无人值守安装centos 7
Cobbler(补鞋匠)是通过将DHCP.TFTP.DNS.HTTP等服务进行集成,创建一个中央管理节点,其可以实现的功能有配置服务,创建存储库,解压缩操作系统媒介,代理或集成一个配置管理系统,控制电 ...
前端性能优化JavaScript篇
关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好.前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊. 1.从资源加载方面来说,浏览器的 ...

angular 模块化之directive

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

随机推荐

热门专题