序
angularjs的工厂服务通常用来构造一些公共数据和方法，它可以在任意一个控制器或指令里调用，从而实现数据公用。
简单用法
这是一个模拟试验用的demo，事实上不会这么使用。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>angularjs factory工厂</title>
<meta name="author" content="loushengyue">
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in data">
名称：<span ng-bind="item.name"></span> |
价钱：<span ng-bind="item.price"></span> |
数量：<span ng-bind="item.num"></span>
</li>
</ul>
<div>总价：<span ng-bind="total"></span></div>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', 'fruitsFactory', function ($scope, fruitsFactory) {
$scope.data = fruitsFactory.data;
$scope.total = fruitsFactory.total();
}])
.factory('fruitsFactory', function () {
var data = [
{id: 1, name: 'apple', price: 5, num: 8},
{id: 2, name: 'banana', price: 3, num: 5},
];
//工厂服务通常返回一个对象，返回的具体内容可以自由设置
return {
data: data,
total: function () {
var _total = 0;
angular.forEach(this.data, function (item) {
_total += item.price * item.num;
});
return _total;
}
}
})
</script>
</body>
</html>高级用法
下面的案例是一个http请求的promise封装
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>angularjs factory工厂</title>
<meta name="author" content="loushengyue">
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in data">
名称：<span ng-bind="item.name"></span> |
价钱：<span ng-bind="item.price"></span> |
数量：<span ng-bind="item.num"></span>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script>
angular.module('app', [])
.controller('ctrl', ['$scope', 'httpFactory', function ($scope, httpFactory) {
$scope.data = [];
httpFactory.getData('./data.json').then(function (value) {
$scope.data = value;
});
}])
.factory('httpFactory', ['$http', '$q', function ($http, $q) {
//这里可以注入除$scope以外的其他服务，例如这里注入了$http和$q
var httpFactory = {};
httpFactory.getData = function (url) {
var res = $q.defer();
httpRequestEvent('get', url).then(function (data) {
res.resolve(data);
});
return res.promise;
};
function httpRequestEvent(type, url) {
var res = $q.defer();
$http({
method: type,
url: url
}).then(function successCallback(response) {
res.resolve(response.data); //解决
}, function errorCallback(error) {
res.reject(error); //拒绝
});
return res.promise;
}
return httpFactory; //这一行只能放最后
}])
</script>
</body>
</html>data.json
[
{
"id": 1,
"name": "apple",
"price": 10,
"num": 5
},
{
"id": 2,
"name": "banana",
"price": 8,
"num": 10
}
]