AngularJS服务和自定义服务

最新推荐文章于 2019-12-10 15:17:38 发布

原创最新推荐文章于 2019-12-10 15:17:38 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #框架 #web前端 #前端开发

框架专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Angular应用中自定义服务的三种实现方式：factory工厂模式、service对象方式及provider代理方式，并通过示例展示了各自的特点及应用场景。

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;// 从自定义服务中获取数据

}]);