自定义 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