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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章