AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块、服务
学习要点
使用模块构架应用
创建和使用服务
为什么要使用和创建服务与模块？
服务允许你打包可重用的功能，使之能在此应用中使用。
模块允许你打包可重用的功能，使之能跨应用使用。
一、应用程序模块化
先看看一个没有模块化的程序
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<!-- 使用自定义指令 -->
<div class="btn-group" tri-button counter="data.totalClicks">
<!-- 遍历按钮 -->
<button class="btn btn-default" ng-repeat="city in data.cities">
{{city}}
</button>
</div>
<h5>Total Clicks: {{data.totalClicks}}</h5>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
// 数据模型
$scope.data = {
// 城市
cities : ["London", "New York", "Paris"],
// 点击总数
totalClicks : 0
};
// 添加监听器，当点击总数发生变化时触发工厂函数
$scope.$watch("data.totalClicks", function (newVal) {
console.log("Total click count: " + newVal);
});
})
// 定义指令
.directive("triButton", function () {
return {
// 隔离作用域
// 双向数据绑定
scope : {
counter : "=counter"
},
// 链式函数
link : function (scope, element, attrs) {
// 点击事件监听，打印日记，计算累加
element.on("click", function (e) {
console.log("Button click: " + e.target.innerText);
scope.$apply(function () {
scope.counter++;
})
});
}
}
})
</script>
</body>
</html>
单击城市按钮，递增点击总数
接下来，我们将指令分离，使之模块化，我们命名为triButtonDirective.js
angular.module("triButtonDir", [])
.directive("triButton", function () {
return {
// 隔离作用域
// 双向数据绑定
scope : {
counter : "=counter"
},
// 链式函数
link : function (scope, element, attrs) {
// 点击事件监听，打印日记，计算累加
element.on("click", function (e) {
console.log("Button click: " + e.target.innerText);
scope.$apply(function () {
scope.counter++;
})
});
}
}
})
接下来，引用定义的标签并且使用它
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDir"])
二、创建使用服务
1.使用Factory方法
第一步：将服务模块化，这里创建一个名为triButtonFactory.js的文件
angular.module("triButtonFactory", [])
.factory("logService", function () {
var messageCount = 0;
return {
log : function (msg) {
console.log("(Log + " + messageCount++ + ") " + msg);
}
}
})
第二步：在视图中引入该服务
<script type="text/javascript" src="js/triButtonFactory.js"></script>
第三步：在控制器中使用它
// 参数依赖注入
angular.module("exampleApp", ["triButtonDirective", "triButtonFactory"])
// 作为参数传人控制器中
.controller("defaultCtrl", function ($scope, logService) {
// 数据模型
$scope.data = {
// 城市
cities : ["London", "New York", "Paris"],
// 点击总数
totalClicks : 0
};
// 添加监听器，当点击总数发生变化时触发工厂函数
$scope.$watch("data.totalClicks", function (newVal) {
// console.log("Total click count: " + newVal);
// 使用自定义服务
logService.log("Total click count: " + newVal);
});
})
2.使用Service方法
第一步：创建构造函数，然后创建服务。我们命名为triButtonService.js
var baseLogger = function () {
this.messageCount = 0;
this.log = function (msg) {
console.log(this.msgType + ": " + (this.messageCount++) + " " + msg);
}
}
var debugLogger = function () {};
debugLogger.prototype = new baseLogger();
debugLogger.prototype.msgType = "Debug";
var errorLogger = function () {};
errorLogger.prototype = new baseLogger();
errorLogger.prototype.msgType = "Error";
angular.module("triButtonService", [])
.service("logService", debugLogger)
第二步：引入triButtonService.js文件，然后使用服务
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<!-- 使用自定义指令 -->
<div class="btn-group" tri-button counter="data.totalClicks">
<!-- 遍历按钮 -->
<button class="btn btn-default" ng-repeat="city in data.cities">
{{city}}
</button>
</div>
<h5>Total Clicks: {{data.totalClicks}}</h5>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonService.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonService"])
.controller("defaultCtrl", function ($scope, logService) {
// 数据模型
$scope.data = {
// 城市
cities : ["London", "New York", "Paris"],
// 点击总数
totalClicks : 0
};
// 添加监听器，当点击总数发生变化时触发工厂函数
$scope.$watch("data.totalClicks", function (newVal) {
// console.log("Total click count: " + newVal);
// 使用自定义服务
logService.log("Total click count: " + newVal);
});
})
</script>
</body>
</html>
3.使用Provider方法
第一步：使用Provider，创建服务。我们命名为triButtonProvider.js
angular.module("triButtonProvider", [])
.provider("logService", function () {
var counter = true;
var debug = true;
return {
messageCounterEnabled : function (setting) {
if (angular.isDefined(setting)) {
counter = setting;
return this;
} else {
return counter;
}
},
debugEnabled : function (setting) {
if (angular.isDefined(setting)) {
debug = setting;
return this;
} else {
return debug;
}
},
// 用于返回服务对象
$get : function () {
return {
messageCount : 0,
log : function (msg) {
if (debug) {
console.log("(LOG" + (counter ? " + " + this.messageCount++ + ") " : ") " + msg));
}
}
}
}
}
})
第二步：引入、配置和使用服务
<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
<title>Angluar test</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
<div class="well">
<!-- 使用自定义指令 -->
<div class="btn-group" tri-button counter="data.totalClicks">
<!-- 遍历按钮 -->
<button class="btn btn-default" ng-repeat="city in data.cities">
{{city}}
</button>
</div>
<h5>Total Clicks: {{data.totalClicks}}</h5>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonProvider.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonProvider"])
// 使提供强对象适用于依赖注入，服务器 + Provider = logServiceProvider
.config(function (logServiceProvider) {
logServiceProvider.debugEnabled(true).messageCounterEnabled(false);
})
.controller("defaultCtrl", function ($scope, logService) {
// 数据模型
$scope.data = {
// 城市
cities : ["London", "New York", "Paris"],
// 点击总数
totalClicks : 0
};
// 添加监听器，当点击总数发生变化时触发工厂函数
$scope.$watch("data.totalClicks", function (newVal) {
// console.log("Total click count: " + newVal);
// 使用自定义服务
logService.log("Total click count: " + newVal);
});
})
</script>
</body>
</html>
美文美图
AngularJS进阶(四十)创建模块、服务的更多相关文章
- 网站开发进阶(四十四)input type="submit" 和"button"的区别
网站开发进阶(四十四)input type="submit" 和"button"的区别 在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...
- Java进阶(四十)Java类、变量、方法修饰符讲解
Java进阶(四十)Java类.变量.方法修饰符讲解 Java类修饰符 abstract: 将一个类声明为抽象类,没有实现的方法,需要子类提供方法实现. final: 将一个类生命为最终(即非继承类) ...
- 网站开发进阶(四十二)巧用clear:both
网站开发进阶(四十二)巧用clear:both 前言 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正 ...
- Java进阶(四十二)Java中多线程使用匿名内部类的方式进行创建3种方式
Java中多线程使用匿名内部类的方式进行创建3种方式 package cn.edu.ujn.demo; // 匿名内部类的格式: public class ThreadDemo { public st ...
- AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href
书海拾贝之特殊的ng-src和ng-href 在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下: 1) 浏览器加载静态HTML文件并解析为DOM: 2) 浏览器加载angular. ...
- AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)
AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...
随机推荐
- C语言程序设计第一次作业（2017.10.10完成）
一:程序框图以及正确运行结果: (1)给出圆半径,得出圆面积: ①程序框图如下: ②测试图如下: 经过测试 ,输入半径2能得出正确结果.多次测试,输入不同值,均得出正确结果,证明稳定性. ③实验分析: ...
- Linux学习之CentOS(十三)-----磁盘管理之 磁盘与目录的容量(转) df 与du 命令
磁盘与目录的容量 现在我们知道磁盘的整体数据是在 superblock 区块中,但是每个各别文件的容量则在 inode 当中记载的. 那在文字接口底下该如何叫出这几个数据呢?底下就让我们来谈一谈这两个 ...
- Mysql锁机制--概念、分类及基础命令
Mysql 系列文章主页 =============== 1 概念 在 Java 程序中,当多线程并发访问某个资源的时候,如果有非线程安全的操作,那么需要通过加锁来保护之.同理,在 Mysql 中,如 ...
- C# IE浏览器
引用Microsoft HTML Object Library 引用 -> com -> Microsoft HTML Object Library 引用后,显示如图 1.判断ie浏览器是 ...
- 解决Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'
在使用npm安装node-sass的时候,可能会出现如下的报错: Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code ...
- MongoDB 连接
启动 MongoDB服务 在前面的教程中,我们已经讨论了如何启动MongoDB服务,你只需要在MongoDB安装目录的bin目录下执行'mongod'即可. 执行启动操作后,mongodb在输出一些必 ...
- Scroll Segmented Control（Swift）
今天用了一个github上一个比较好用的Segmented Control但是发现不是我要效果,我需要支持scrollView.当栏目数量超过一屏幕,需要能够滑动. 由于联系作者没有回复,我就自己在其 ...
- Dynamics CRM2016 关闭错误报告弹框提示
在之前的版本中错误报告的弹框提示是可以在隐私首选项中设置关闭的,如下图所示 但是在2016中这个设置没了 有人说在右上角的选项中设置,但那个只能是设置个人的无法修改系统级别的.在系统中找了半天还是没有 ...
- Programming In Scala笔记-第十七章、Scala中的集合类型
本章主要介绍Scala中的集合类型,主要包括:Array, ListBuffer, Arraybuffer, Set, Map和Tuple. 一.序列 序列类型的对象中包含多个按顺序排列好的元素,可以 ...
- how to output quotes in bash prompt
introduction In certain situations, quotes are required to be output in the command prompt. To do th ...