ng自定义服务的几种方式

ng的服务本质上也是一个对象,所以也挺好理解,用法也简单,需要时直接注入即可用,ng称为依赖注入,讲得那么高大上,其实就跟JS函数传参是一样的,完全可以这样去理解,下面直接看代码:

<body ng-controller="mycontr">

<!--绑定控制器里的操作方法(跟绑定事件处理方法是一样,只是叫法不同)-->

<button ng-click="callShow()">clikcMe</button>

<button ng-click="callstudy()">clikcMe</button>

<script>

  //创建ng模块

   var app=angular.module("myModule",['ng']);

//下面就两种自定义的方式,两种方式用法差不多,都需要两个参数,第一个是参数是自定义服务的名称,可根据项目去命名,第二个是个函数,定义你提供的服务,也就是这个服务能干嘛,自己去设置。第一种方法返回对象的方式,第二种是构造函数的方式。ng底层还是JS,所以大致原理是一样的,只是ng加入了设计理念MVC;我就把ng的操作用法按这个设计模式分为三个部分,模型数据,显示视图,还有操作数据视图的控制器。

  //通过factory方法自定义服务,

       app.factory("$show",function(){

  return {

 showFunc:function(){  //定义方法

alert('Hello Service');  

 }   

  }   

       });
  
  //通过service方法自定义服务

  app.service("$student",function(){

  this.name="shawn";  //设置变量

  this.study=function(){  //设置方法

 alert("shawn is studying");   

  }

       });
     

//创建控制器    

app.controller("mycontr",function($scope,$show,$student){  //用到哪个服务需要从参数中注入

    //声明控制器方法

$scope.callShow=function(){

 $show.showFunc();//调用服务中方法

    }

//声明控制器方法

$scope.callstudy=function(){

 $student.$study();  //调用服务中方法

}

})

</script>

</body>

调用服务方法时前面总要带着服务名,这不就是一个大的对象,里面可以有若干个变量数据和方法,对象方法调用不也是带着对象名么,就说了本质还是对象嘛。

还有通过value/content也可以创建比较简单的服务,大多用来定义一些变量,用法都差不多。

完!!!!!



发布了23 篇原创文章 · 获赞 27 · 访问量 9万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章