AngularJS => サービス

サービスの作成方法

angular.module("app")
  .service("counterService", function(){

    var service = {
        number: 0
    };
    
    return service;
   });

サービスの利用方法

    angular.module("app")
        
        // Custom services are injected just like Angular's built-in services
        .controller("step1Controller", ['counterService', '$scope', function(counterService, $scope) {
            counterService.number++;
            // bind to object (by reference), not to value, for automatic sync
            $scope.counter = counterService;
        })

このコントローラを使用するテンプレートでは、次のように記述します。

// editable
<input ng-model="counter.number" />

または

// read-only
<span ng-bind="counter.number"></span>

もちろん、実際のコードでは、コントローラ上のメソッドを使用してサービスとやりとりします。コントローラ上のメソッドを使用すると、サービスに委譲されます。上記の例では、コントローラがテンプレートで使用されるたびにカウンタ値がインクリメントされます。

Angularjsのサービスはシングルトンです：

サービスは、アプリケーションごとに（$ injectorによって）一度だけインスタンス化され、遅延ロードされた（必要な場合にのみ作成される）シングルトンオブジェクトです。

シングルトンは、自分自身の1つのインスタンスだけを作成できるクラスであり、前記インスタンスに簡単に簡単にアクセスできます。ここで述べたように

angular.factoryを使用したサービスの作成

最初にサービスを定義します（この場合、ファクトリパターンを使用します）。

.factory('dataService', function() {
    var dataObject = {};
    var service = {
        // define the getter method
        get data() {
            return dataObject;
        },
        // define the setter method
        set data(value) {
            dataObject = value || {};
        }
    };
    // return the "service" object to expose the getter/setter
    return service;
})

これで、サービスを使用してコントローラ間でデータを共有できます。

.controller('controllerOne', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // create an object to store
    var someObject = {
        name: 'SomeObject',
        value: 1
    };
    // store the object
    this.dataService.data = someObject;
})

.controller('controllerTwo', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // this will automatically update with any changes to the shared data object
    this.objectFromControllerOne = this.dataService.data;
})

$ sce - テンプレート内のコンテンツとリソースのサニタイズとレンダリング

$ sce （ "Strict Contextual Escaping"）は、テンプレート内のコンテンツと内部ソースを自動的にサニタイズするビルトインの角度サービスです。

外部ソースと生のHTMLをテンプレートに注入するには、 $sce手動で$sce必要があります。

この例では、簡単な$ sce衛生フィルタを作成します： `。

デモ

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

テンプレートでの使用

<div ng-repeat="item in items">
    
    // Sanitize external sources
    <ifrmae ng-src="{{item.youtube_url | sanitizer}}">
    
    // Sanitaize and render HTML 
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

'array syntax'を使って依存関係を持つサービスを作成する方法

angular.module("app")
  .service("counterService", ["fooService", "barService", function(anotherService, barService){

    var service = {
        number: 0,
        foo: function () {
            return fooService.bazMethod(); // Use of 'fooService'
        },
        bar: function () {
            return barService.bazMethod(); // Use of 'barService'
        }
    };
    
    return service;
   }]);

サービスの登録

サービスを作成する最も一般的で柔軟な方法は、angular.module APIファクトリを使用します。

angular.module('myApp.services', []).factory('githubService', function() {       
   var serviceInstance = {};
   // Our first service
   return serviceInstance;
});

サービスファクトリ関数は、コントローラを作成する方法と同じように、関数または配列のいずれかです。

// Creating the factory through using the
// bracket notation
angular.module('myApp.services', [])
.factory('githubService', [function($http) {
}]);

私たちのサービス上のメソッドを公開するには、それをサービスオブジェクトの属性として配置することができます。

angular.module('myApp.services', [])
    .factory('githubService', function($http) {
        var githubUrl = 'https://api.github.com';
        var runUserRequest = function(username, path) {
        // Return the promise from the $http service
        // that calls the Github API using JSONP
        return $http({
            method: 'JSONP',
            url: githubUrl + '/users/' +
            username + '/' +
            path + '?callback=JSON_CALLBACK'
        });
    }
// Return the service object with a single function
// events
return {
    events: function(username) {
    return runUserRequest(username, 'events');
    }
};

サービスと工場の違い

1）サービス

サービスは、実行時にnew関数で呼び出されるconstructor関数です。これは、単純なjavascriptの場合と同じように、 AngularJsがnew背後で呼び出している点だけです。

サービスの場合に覚えておくべき1つの親指のルールがあります

サービスはnewもので呼ばれるコンストラクタです

$httpサービスを使って学生の詳細を取得し、それをコントローラで使用するサービスを登録する簡単な例を見てみましょう

function StudentDetailsService($http) {
  this.getStudentDetails = function getStudentDetails() {
    return $http.get('/details');
  };
}

angular.module('myapp').service('StudentDetailsService', StudentDetailsService);

このサービスをコントローラに注入するだけです

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

いつ使用しますか？

.service()は、コンストラクタを使用したい場所で使用します。これは通常、 getStudentDetails()ようにパブリックAPIを作成するために使用されます。しかし、コンストラクタを使いたくなく、シンプルなAPIパターンを使いたい場合は、 .service()柔軟性があまりありません。

2）工場

私たちが使用してすべてのものを得ることができたとしても.factory()我々は、使用しているでしょう.services()それはなりません.factory() 「と同じ」 .service() .service()よりもはるかに強力で柔軟性があり.service()

.factory()は、値を返すために使用されるデザインパターンです。

工場の場合に覚えておくべき2つの親指のルールがあります

ファクトリが値を返す
ファクトリ（缶）がオブジェクトを作成する（任意のオブジェクト）

.factory()を使ってできることのいくつかの例を見て.factory()う。

リテラルを返す

基本的なRevealingモジュールパターンを使用してオブジェクトを返すためにファクトリが使用される例を見てみましょう

function StudentDetailsService($http) {
  function getStudentDetails() {
    return $http.get('/details');
  }
  return {
    getStudentDetails: getStudentDetails
  };
}

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

コントローラ内の使用法

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

戻る閉鎖

閉鎖とは何ですか？

クロージャーは、ローカルで使用されているが、囲みスコープで定義されている変数を参照する関数です。

以下はクロージャの例です

function closureFunction(name) {
  function innerClosureFunction(age) { // innerClosureFunction() is the inner function, a closure
    // Here you can manipulate 'age' AND 'name' variables both
  };
};

「素晴らしい」部分は、親スコープ内のnameアクセスできることです。

.factory()中で上記の閉鎖の例を使用します。

function StudentDetailsService($http) {
  function closureFunction(name) {
  function innerClosureFunction(age) {
    // Here you can manipulate 'age' AND 'name' variables
    };
  };
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

コントローラ内の使用法

function StudentController(StudentDetailsService) {
  var myClosure = StudentDetailsService('Student Name'); // This now HAS the innerClosureFunction()
  var callMyClosure = myClosure(24); // This calls the innerClosureFunction()
};

angular.module('app').controller('StudentController', StudentController);

コンストラクタ/インスタンスの作成

.service()は、上記のようにnewを呼び出すコンストラクタを作成します。 .factory()は、 newへの呼び出しでコンストラクタを作成することもできます

これを達成する方法の例を見てみましょう

function StudentDetailsService($http) {
  function Student() {
    this.age = function () {
        return 'This is my age';
    };
  }
  Student.prototype.address = function () {
        return 'This is my address';
  };
  return Student;
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

コントローラ内の使用法

function StudentController(StudentDetailsService) {
  var newStudent = new StudentDetailsService();
  
  //Now the instance has been created. Its properties can be accessed.

 newStudent.age();
 newStudent.address();
  
};

angular.module('app').controller('StudentController', StudentController);

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

AngularJS
サービス

サーチ…

サービスの作成方法

サービスの利用方法

angular.factoryを使用したサービスの作成

$ sce - テンプレート内のコンテンツとリソースのサニタイズとレンダリング

'array syntax'を使って依存関係を持つサービスを作成する方法

サービスの登録

サービスと工場の違い