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
- 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>
回應 (Leave a comment)