自定義 AngularJS service

Tags:

簡中版

Angularjs Service

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

如何寫一個 Angularjs Service

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

Example

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

如何使用客製化的 Angularjs Service

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

Example

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

全部的程式碼

Example

<!doctype html>
<html >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
   <script>
 
var m = angular.module("myService", []);
m.service('serviceSample', function () {
    this.run = function () {
        return "Hello World! <br />This text is rendered by angularjs service.";
    };
});
 
var myapp = angular.module("myapp", ['myService']);
myapp.controller('ct',  function ($scope, $sce, serviceSample) {
    $scope.text = $sce.trustAsHtml(serviceSample.run());
});
 
 
 
  </script>
 
  </head>
  <body ng-app="myapp">
 
    <div  class="sample-wrap" ng-controller="ct">
      <h2 ng-bind-html="text"></h2>
    </div>
 
 
 
  </body>
</html>

網頁好讀版

This post was last modified by puritys 2014/08/17

AngularJS