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
<span my-draggable>Drag ME</span> 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 ...
随机推荐
- PHP判断变量是否小数并对小数进行处理
/*判断是否为小数demo*/$a = 1.2; if(is_int($a)){ echo "$a 是整数!"; }else{ echo "$a 不是整数!"; ...
- 51NOD 1092 回文字符串 LCS
Q:给定一个串,问需要插入多少字符才能使其成为回文串,也就是左右对称的串. 经典求LCS题,即最长公共子序列,不用连续的序列.考虑O(n^2^)解法,求LCS起码得有两个串,题中才给了一个串,另一个需 ...
- 使用navigate导出表数据
以下内容不算技术贴,只能算是技巧贴,要做的一个操作,从数据库A中把元素A1表,导入到数据库B中B1表,且,A1表的数据是部分导出,那么有两种方法进行导出 方法1: 选择数据表,右键,选择“转存储sql ...
- 目的檔格式 (ELF)
http://ccckmit.wikidot.com/lk:elf 目的檔ELF 格式(Executable and Linking Format) 是 UNIX/Linux 系統中較先進的目的檔格式 ...
- js字符串内容包含单引号‘’和双引号“”怎么办？
如果javascript中的字符串包含单引号和双引号,可以用转义字符来标识 'I\'m \"OK\"!'; 表示的字符串内容是:I'm "OK"! 转义字符\可 ...
- 分页查询关键代码 多条件查询关键代码 删除选中商品关键代码 修改要先回显再修改 修改要先回显再修改 同一业务集中使用同一servlet的方法
分页查询关键代码: 通过servlet转发回来的各种信息进行分页的设计(转发回的信息有 分页查询的List集合 查询的页码 查询的条数 查询的数据库总条数 查询的总页码) 从开始时循环10次出现十个数 ...
- Javascript和HTML5的关系
HTML5是一种新的技术,就目前而言,我们所知的HTML5都是一些标签,但是有了JS之后,这些标签深层的扩展功能才得以实现. 比如video标签,我们对其理解为一个简单的标签,但实际上,v ...
- spring-JDBC Template
JDBC Template概念 为简化持久化操作,spring在JDBC API之上提供JDBC Template组件 提供统一模板: 环境配置 1.创建MySQL数据库 2.搭建maven项目,并引 ...
- 多任务版udp聊天器
import socket import threading def send_msg(udp_socket): """获取键盘数据,并将其发送给对方"&quo ...
- linux 基本命令笔记
nohup [process] & 后台挂起命令nohup 挂起& 后台运行 python3 manage.py runserver 0.0.0.0:8080 python -r 递 ...