AngularJS服务和自定义服务

最新推荐文章于 2019-05-17 11:37:29 发布

chongxiaocheng

最新推荐文章于 2019-05-17 11:37:29 发布

阅读量400

点赞数

分类专栏：框架文章标签： angularjs 框架 web前端前端开发

本文链接：https://blog.csdn.net/chongxiaocheng/article/details/70946124

版权

框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Angular服务和自定义服务

Angular应用中MVC模式：

View视图~专门用于数据的展示和提取

Controller控制器，主要用于数据的挂载【数据从哪里来？】

自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中

Model数据模型：应用中要使用的各种数据，一般从后端获取之后存储在控制器的变量中

Angular的服务，主要从以下两方面来讲
1.自定义服务
Angular中自定义服务的实现方式有三种
* factory工厂模式实现：比较常用，根据项目组规范进行确定是否使用
* service对象方式：比较常用，根据项目组规范进行确定是否使用
* provider代理方式：Angular框架中的使用方式，常规项目开发很少使用

2.内置服务（$http服务，其他服务）

一、

自定义服务第一种factory模式

<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
factory:<div ng-bind="value1"></div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope","service1",
function($scope, s1) {
$scope.value1 = s1;// 从自定义服务中获取数据

}]);

app.factory("service1", function() {
// 从后端获取数据:模拟
var _v = "factory value";
// 返回数据，返回的数据可以是字符串，可以是复杂对象
return _v;
});

</script>

第一种实现方式，以其简洁的使用特色而流行于自定义服务行列
* 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据
* 极大的满足了我们项目的需要，所以使用较多，需要掌握！

二、

自定义服务第二种service方式

<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
service:<div ng-bind="value2"></div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope","service2",
function($scope, s2) {
$scope.value2 = s2.v;// 从自定义服务中获取数据

}]);

app.service("service2", function() {
// 从后端获取数据:模拟
var _v = "service value";
// 返回JSON对象
return {v:_v};
});

</script>

第二种实现方式，以其规范的返回数据而流行与自定义服务行列
service方式，只能返回对象，在某些项目组中，为了规范服务返回的数据~也就是强制指定
必须返回对象数据，才能正常解析，避免了出现大量的各种格式的数据：由于返回数据的标准化而流行！

三、

自定义服务第三种provider方式

<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
provide:<div ng-bind="value3"></div>
</div>
<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", ["$scope","service3",
function($scope, s3) {
$scope.value3 = s3;// 从自定义服务中获取数据

}]);

app.provider("service3", function() {

this.$get =function() {
return "provider value";
}
});

</script>

第三种实现方式，要求处理的过程中必须通过this.$get()函数进行返回数据的处理
这种方式在Angular自己的内置服务和框架中使用较多，但是不推荐在项目开发中使用
因为操作的复杂性和代码的可读性无形中让开发人员掌握有一定的难度

chongxiaocheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS服务和自定义服务

Angular服务和自定义服务 Angular应用中MVC模式： View视图~专门用于数据的展示和提取 Controller控制器，主要用于数据的挂载【数据从哪里来？】自定义服务：用于从后端接口获取数据，然后将数据挂载到控制器中 Model数据
复制链接

扫一扫

专栏目录