2014
Jul
30

Angularjs Service

在 Angularjs 裡, Service 就像是一個 Object ,這個 Object 把相關功能包裝起來,當你需要使用某些功能時,就能直接呼叫他,例如我們常常會用到 AJAX , 你可以使用 $http 這個 Angularjs 內建的 service ,來發出 AJAX Request 。

如何寫一個 Angularjs Service

寫一個 Service 非常的簡單,這裡我先建立一個新的 module 叫 myService ,然後我定義一個新的 service 叫做 serviceSample,再來寫一個 Method run ,這個 function 會回傳一行文字,看看下面的範例,只要簡單的五行程式碼,就能夠建立一個客製化的 service。

Example
  1. var m = angular.module("myService", []);
  2. m.service('serviceSample', function () {
  3. this.run = function () {
  4. return "Hello World! <br />This text is rendered by angularjs service.";
  5. };
  6. });

如何使用客製化的 Angularjs Service

首先我們要先載入剛剛寫好的 Angularjs Module 「myService」,只要在宣告 主 Module 時的第二個參數,填上我要載入的 Module 名稱即可,接著在 controller function 中的參數寫上要使用的 service 名稱,這個範例中我寫了三個 services ,其中 $scope 與 $sce 是 Angularjs 內建的, serviceSample 則是我剛剛載入的 service ,只要載入成功,我們就能直接使用剛剛定義好的 Method。

Example
  1. var myapp = angular.module("myapp", ['myService']);
  2. myapp.controller('ct', function ($scope, $sce, serviceSample) {
  3. $scope.text = $sce.trustAsHtml(serviceSample.run());
  4. });

全部的程式碼

Example
  1. <!doctype html>
  2. <html >
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
  5. <script>
  6.  
  7. var m = angular.module("myService", []);
  8. m.service('serviceSample', function () {
  9. this.run = function () {
  10. return "Hello World! <br />This text is rendered by angularjs service.";
  11. };
  12. });
  13.  
  14. var myapp = angular.module("myapp", ['myService']);
  15. myapp.controller('ct', function ($scope, $sce, serviceSample) {
  16. $scope.text = $sce.trustAsHtml(serviceSample.run());
  17. });
  18.  
  19.  
  20.  
  21. </script>
  22.  
  23. </head>
  24. <body ng-app="myapp">
  25.  
  26. <div class="sample-wrap" ng-controller="ct">
  27. <h2 ng-bind-html="text"></h2>
  28. </div>
  29.  
  30.  
  31.  
  32. </body>
  33. </html>


回應 (Leave a comment)