angular js一factory，service，provider创建服务

服务：在AngularJS 中，服务是一个函数或对象

在写控制器的时候，不要复用controller,当我们的controller里面有相同的代码时，此时需要把它抽取成一个服务，所有的服务都符合依赖注入的原则，服务在整个应用的生命周期中存在,可用来共享数据。

Angular提供了3种方法来创建服务，factory，service，provider

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl"><input type="text" ng-model="name"/> {{name}}
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>var app=angular.module("myApp",[]);//自定义服务provider,myService1为服务名app.provider('myService1', function () {this.$get = function () {return{message: 'customprovider Message'}}});//自定义服务serviceapp.service('myService2', function () {return ['上海'];});//自定义工厂factoryapp.factory("myService3", [function () {return [1, 2, 3, 4, 5, 6];}]);    //service和factory类似，但返回的东西必须是对象    app.controller('myCtrl',function($scope,myService1,myService2,myService3){$scope.name = '橘子';console.log(myService1);console.log(myService2);console.log(myService3);});
</script>
</body>
</html>

效果截图

共享数据

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/>
</head>
<body>
<div ng-app="myApp"><div ng-controller="firstCtrl"><input type="text" ng-model="data.name"/><input type="text" ng-model="Data.message"/><p>first{{data.name}}</p><p>first{{Data.message}}</p></div><div ng-controller="secondCtrl"><p>second{{data.name}}</p><p>second{{Data.message}}</p></div>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>var app = angular.module("myApp",[]);app.factory('Data',function(){return{message:'共享的数据'}});app.controller('firstCtrl',function($scope,Data){$scope.data ={name: '橘子'};$scope.Data = Data;});app.controller('secondCtrl',function($scope,Data){$scope.Data = Data;});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Tiboo/p/6757530.html

angular js一factory，service，provider创建服务相关推荐

angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
factory service provide自定义服务
1.factory factory , 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加属性和方法, 然后返 ...
前台页面通过ajax环境和js调用web service的几种方法
目录: 1.配置ajax环境 2.js中调用web service (ajax环境) 方法一 3.方法二 4.方法三 5.ajax中的错误处理 //6.写的比较快如果有疏忽之处如能指出感激不尽. ...
AngularJS笔记之创建服务方式比较： factory vs service vs provider
2019独角兽企业重金招聘Python工程师标准>>> 那么问题来了,Angular 提供了三种方法来创建并注册我们的 service:factory, service 和 prov ...
创建服务factory和service方法的区别
factory方法返回的是对象,json或数组,也可以返回字符串类型的数据,但service方法只能返回数据或对象创建服务有3种方法 $provide.provider('服务名',function ...
AngularJS中service，factory，provider的区别（转载：http://my.oschina.net/tanweijie/blog/295067）...
目录[-] 一.service引导二.service 1.factory() ‍2.service()‍ ‍3.provider()‍‍ 一.service引导刚开始学习Angular的时候,经常 ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider - $scope - testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
Angular.js前端简单微服务架构设计
1.使用angular脚手架进行多项目工作区搭建* 搭建后的项目到project层,后续项目需自主配置 ng new my-workspace --create-application false 2 ...

angular js一factory，service，provider创建服务

angular js一factory，service，provider创建服务相关推荐

最新文章

热门文章