angular学习(四)—— Services
2016-07-05 17:09
519 查看
转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51244041
Services简介
angular的services非常适合用依赖注入的方式将对象组合在一起,你能用services跨app去组合和分享你的代码。
angular services有以下两个特点:
1.延迟实例化——当有app的组件依赖它的时候才会去实例化。
2.单例模式——app的组件调用services时,只会获得一个services工厂实例化后的引用。
Services使用
使用services很简单,你只需为app的组件增加依赖即可,angular的DI系统为了做剩下的事情。
useservices.html
script.js
Services创建
开发者可以通过使用module注册services名称和services的工厂方法来定义services。
services的工厂方法可以返回一个单例对象或者函数。该对象或函数可以任意注入到依赖于该services的组件中。
Services注册
services可以使用module API来注册,通常使用module 工厂 api来注册。
注意你注册的不是一个services实例,仅仅是一个services的工厂方法,只有当被调用时才会进行实例化。
Dependencies
services也可以有自己的依赖,就像在controller中声明依赖一样,services可以在他的工厂方法中声明依赖。
下面的示例module有两个services,每个services有不同的依赖。
1.batchLog services依赖于内置的$interval service和$log services。
2.routeTemplateMonitor services依赖于内置的$route service和自定义的batchLog services。
3.两个services都用数组来声明他们的依赖
4.数据的标识符的顺序和工厂方法中的顺序是一致的。
用$provide注册Services
你可以通过module的config函数中的$provide对象来注册services
这种技术常用来在单元测试中模拟services的依赖关系
如果我的文章对您有帮助,请用支付宝打赏:
Services简介
angular的services非常适合用依赖注入的方式将对象组合在一起,你能用services跨app去组合和分享你的代码。
angular services有以下两个特点:
1.延迟实例化——当有app的组件依赖它的时候才会去实例化。
2.单例模式——app的组件调用services时,只会获得一个services工厂实例化后的引用。
Services使用
使用services很简单,你只需为app的组件增加依赖即可,angular的DI系统为了做剩下的事情。
useservices.html
<script src="../script/angular.min.js"></script> <script src="script.js"></script> <body ng-app="myServiceModule"> <div id="simple" ng-controller="MyController"> <p>Let's try this simple notify service, injected into the controller...</p> <input ng-init="message='test'" ng-model="message" > <button ng-click="callNotify(message);">NOTIFY</button> <p>(you have to click 3 times to see an alert)</p> </div> </body>
script.js
(function(angular) { 'use strict'; angular. module('myServiceModule', []). controller('MyController', ['$scope', 'notify', function ($scope, notify) { $scope.callNotify = function(msg) { notify(msg); }; }]). factory('notify', ['$window', function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("\n")); msgs = []; } }; }]); })(window.angular);
Services创建
开发者可以通过使用module注册services名称和services的工厂方法来定义services。
services的工厂方法可以返回一个单例对象或者函数。该对象或函数可以任意注入到依赖于该services的组件中。
Services注册
services可以使用module API来注册,通常使用module 工厂 api来注册。
var myModule = angular.module('myModule', []); myModule.factory('serviceId', function() { var shinyNewServiceInstance; // factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; });
注意你注册的不是一个services实例,仅仅是一个services的工厂方法,只有当被调用时才会进行实例化。
Dependencies
services也可以有自己的依赖,就像在controller中声明依赖一样,services可以在他的工厂方法中声明依赖。
下面的示例module有两个services,每个services有不同的依赖。
var batchModule = angular.module('batchModule', []); /** * The `batchLog` service allows for messages to be queued in memory and flushed * to the console.log every 50 seconds. * * @param {*} message Message to be logged. */ batchModule.factory('batchLog', ['$interval', '$log', function($interval, $log) { var messageQueue = []; function log() { if (messageQueue.length) { $log.log('batchLog messages: ', messageQueue); messageQueue = []; } } // start periodic checking $interval(log, 50000); return function(message) { messageQueue.push(message); } }]); /** * `routeTemplateMonitor` monitors each `$route` change and logs the current * template via the `batchLog` service. */ batchModule.factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope', function($route, batchLog, $rootScope) { return { startMonitoring: function() { $rootScope.$on('$routeChangeSuccess', function() { batchLog($route.current ? $route.current.template : null); }); } }; }]);
1.batchLog services依赖于内置的$interval service和$log services。
2.routeTemplateMonitor services依赖于内置的$route service和自定义的batchLog services。
3.两个services都用数组来声明他们的依赖
4.数据的标识符的顺序和工厂方法中的顺序是一致的。
用$provide注册Services
你可以通过module的config函数中的$provide对象来注册services
angular.module('myModule', []).config(['$provide', function($provide) { $provide.factory('serviceId', function() { var shinyNewServiceInstance; // factory function body that constructs shinyNewServiceInstance return shinyNewServiceInstance; }); }]);
这种技术常用来在单元测试中模拟services的依赖关系
如果我的文章对您有帮助,请用支付宝打赏:
相关文章推荐
- angular.element方法汇总
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
- Angular用来控制元素的展示与否的原生指令介绍
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- AngularJS页面访问时出现页面闪烁问题的解决
- 利用CSS3在Angular中实现动画
- 初识angular框架后的所思所想
- 实例剖析AngularJS框架中数据的双向绑定运用
- 理解Angular数据双向绑定
- Angular中的Promise对象($q介绍)
- Angular实现form自动布局
- 在AngularJS中使用jQuery的zTree插件的方法
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- angular简介和其特点介绍
- AngularJS使用angular-formly进行表单验证
- 详解JavaScript的AngularJS框架中的作用域与数据绑定
- 给angular加上动画效遇到的问题总结