在ng中,为什么要使用服务?
服务在mvc里面也就相当于model,用于和服务端交互,与数据打交道,我们不应该在controller里面做太多和数据相关的事情,所以就有了服务,也就是我们的model ,我们可以通过定义的module的第三个参数(相当于一个配置的参数)或者是config来实现,或者直接在module后面
.
出来
方式一 :使用 provider
html结构:
<div ng-app="starter" ng-controller="myCtrl"></div>
通过module的第三个参数,注入
$provide
和使用$get
来实现- js结构 :
/* module的第三个参数来实现 */ var module = angular.module("starter",[],function($provide){ $provide.provider("myProvider",function(){ this.$get = function(){ // 这儿也可以返回一个字符串 如下: // return "myProvider"; return { name:"这是我自己定义的一个服务" } } }); }); /* 在controller 中注入我们定义的服务 */ module.controller("myCtrl", ["myProvider", function(myProvider){ console.log(myProvider); // 可以获取到数据 }])
- js结构 :
通过config配置来实现
- js 代码:
var module = angular.module("starter",[]); module.config(function($provide){ $provide.provider("myProvider2",function(){ this.$get = function(){ return "myProvider2"; } }); }); module.controller("myCtrl", ["myProvider2", function(myProvider2){ console.log(myProvider2); // 可以获取到数据 myProvider2 }])
- js 代码:
直接使用
.
以后推荐这个,方便!- js代码:
var module = angular.module("starter",[]); module.provider("myProvider",function(){ this.$get = function(){ return { name:"我是myProvider" } } }); module.controller("myCtrl", ["myProvider", function(myProvider){ console.log(myProvider); // 可以获取到数据 myFactory }])
- js代码:
当然,如果return的是一个对象,那么我们可以在对象里面做很多事情,比如定义set和get方法等。
方式二 :使用 factory
使用相同的html结构
js代码:
var module = angular.module("starter",[]); module.factory("myFactory",function(){ // 使用factory ,不必使用 $get了。 return { name:"我是factory" } }); module.controller("myCtrl", ["myFactory", function(myFactory){ console.log(myFactory); // 可以获取到数据 myFactory }])
方式三 : 使用 service
相同的html结构
js代码
var module = angular.module("starter",[]); module.service("myService",function(){ // 使用factory ,不必使用 $get了。 return { name:"myservice" } }); module.controller("myCtrl", ["myService", function(myService){ console.log(myService); // 可以获取到数据 myService }])
总结:
- 使用provider的时候,必须使用$get , 而factory和service可以直接return
- provider和factory可以return字符串,而service必须return的是一个对象或者null(null也是对象)