首页 技术 正文
技术 2022年11月12日
0 收藏 659 点赞 3,417 浏览 2492 个字

在介绍AngularJS自定义服务之前,我们先来了解一下AngularJS~

学过HTML的人都知道,HTML是一门很好的伪静态文本展示设计的声明式语言,但是,要构建WEB应用的话它就显得乏力了。

而AngularJS是为了克服HTML在构建应用上的不足而设计的。

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。它有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……

AngularJS通过新的属性和表达式扩展了HTML;可以构建一个单一页面应用程序;而且学习起来非常简单。

有了以上的了解,我们来看一下AngularJS中的自定义服务。

angularjs中可通过三种方式自定义服务,

分别为$service,$factory,$provider

下面我就给大家分别介绍一下三种AngularJS自定义服务的区别:

一、服务service

第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例模式,可以用来在controller之间传递数据;

使用new关键字实例化,所以直接使用this定义service,如果你不知道原因,就看看js中的this。
例如:

 .service('myService', ['', function() {
this.getName = function() {
return 'CooMark';
}
}])

内置服务:
>>> 使用内置服务,必须在Controller中通过函数的参数注入进来!!!!!

$location:返回当前页面的 URL地址。
$http:向服务器发送请求,应用响应服务器传送过来的数据,类似于Ajax
$timeout:相当于setTimeout();
$interval:相当于setInterval();

(参考代码)body部分:

 <body ng-app="app" ng-controller="ctrl">
<p>[功能]<br />
{{gongneng}}
</p>
<p>255转为16进制为:{{num}}</p>
</body>

(参考代码)JS部分:

先导入JS文件angular.js!!!

 <script src="libs/angular.js"></script>
     <script>
angular.module("app",[])
.controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){ // $scope.local = $location.$$absUrl;
// $scope.local = $location.absUrl(); $scope.local = $location.$$host; $timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
$scope.num = 0; $interval(function(){
$scope.num ++;
},1000); $scope.gongneng = $hexafy.$$gongneng;
$scope.hexafy = $hexafy;
}) /*自定义服务*/
.service('$hexafy', function() {
this.$$gongneng = "将转入的数字,转为16进制";
this.myFunc = function (x) {
return x.toString(16);
}
}) /*自定义过滤器*/
.filter("filt",function(){
return function(x){
return x.toString(16);
}
})
/*在过滤器中,调用自定义服务*/
.filter("filt1",function($hexafy){
return function(x){
return $hexafy.myFunc(x);
}
}) </script>

二、服务factory

factory是一个函数用于返回值,通常我们使用factory函数来计算或返回值。

factory使用上,与service差距不大。

(参考代码) body部分参考服务Service,JS代码如下:

先导入JS文件angular.js!!!

 <script src="libs/angular.js"></script>
<script>
angular.module("app",[])
.config()
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
.factory('hexafy',function(){
var obj = {
gongneng : "将转入的数字,转为16进制",
myFunc:function(x){
return x.toString(16);
}
};
return obj;
}) </script>

三、服务provider

1、在AngularJS中,Service,factory都是基于provider实现的。
2、在provider中,通过$get()方法提供了factory的写法,用于返回 value/service/factory。;
3、provider是三种自定义服务中,唯一可以写进config配置阶段的一种。

如果服务,必须要在配置阶段执行,那么必须使用provider。否则,一般使用Service或factory。

四、扩展:angularjs的依赖注入和自定义服务有什么区别

AngularJS实际上是在调用前面出现的代码(就是$provide.provider的版本)。

从字面上来说,angularjs的依赖注入和自定义服务基本上没有差别。

value方法也一样,如果我们需要从$get函数(也就是我们的factory函数)返回的值永远相同的话,

我们可以使用value方法来编写。

好了~~~今天的博客内容就先分享到这里,欢迎留言~~~

大家一起加油哦!一起学习,一起进步!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,903
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,428
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,245
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,057
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,689
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,726