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项目开发技巧之图片预加载" ...
随机推荐
- 360面试-C++后端(实习)
在线远程视频面试 一面: 自我介绍. 知道哪几种排序算法,各算法的时间复杂度. 解决hash冲突的几种方式. 有哪些方法清除cache中旧的数据.不太清楚,我扯到了操作系统中缺页中断的页面置换原理上, ...
- 两个App之间调起通信
前言 经常使用一些app的分享功能,比如点击QQ分享,就从app打开(跳转到)QQ,然后分享完之后又回到我们的app,那么这是怎样实现的呢? 假设有这么一个需求,由app1跳转到app2,当app2完 ...
- MultiTigger 绑定异常处理
异常产生环境: 在初始化一个窗口后,没有show出来.在此窗口中,有个控件,重写了控件模板,并加了MultiTrigger. 注意:俩个Condition,一个是从外面绑定过来的Tag,一个是Cont ...
- jsp&servlet初体验——用户登录功能实现
数据库准备-创建db_login数据库 t_user表 1.创建web工程 2.创建用户model user.java package com.gxy.model; public class U ...
- 牛客网编程练习之PAT乙级(Basic Level):1034 写出这个数
AC代码: import java.util.*; /** * @author CC11001100 */ public class Main { public static void main(St ...
- 导出和导入Docker容器
导出容器 如果要导出本地某个容器,可以使用 docker export 命令. $ sudo docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATU ...
- 拦截器(Interceptor)中的invocation.invoke()
关于在Struts2的自定义的验证拦截器(Interceptor)中的invocation.invoke()是什么意思? package com.xjtu.interceptor; import co ...
- 阿里云服务器云数据库免费体验(Java Web详细实例)
一.效果展示 博主部署了两个war包到阿里云服务器上,一个是没有连接数据库的,另外一个是连接了数据库的. (由于阿里云服务器免费使用15天,下面链接约2016年3月9日后无效) (1)无数据库版访问地 ...
- Swift中String和NSString的一个不同之处
我们知道在Swift中String和NSString是可以互相转换使用的-额-应该是在绝大数情况下可以互相转换使用.在某些情况下可能还有一丝丝略微的差别:比如在涉及到处理字符串中字符索引的时候. 我们 ...
- Tomcat如何实现Comet
Comet模式是一种服务器端推技术,它的核心思想提供一种能让当服务器端往客户端发送数据的方式.Comet模式为什么会出现?刚开始人们在客户端通过不断自动刷新整个页面来更新数据,后来觉得体验不好又使用了 ...