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에 의해) 응용 프로그램마다 한 번만 인스턴스화되고 lazy loaded (필요한 경우에만 생성 됨)라는 싱글 톤 객체입니다.

싱글 톤은 오직 하나의 인스턴스가 생성되도록 허용하는 클래스이며, 상기 인스턴스에 간단하고 쉽게 액세스 할 수있게 해줍니다. 여기에 명시된 바와 같이

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 위생 필터를 만들 것이다 : `.

데모

.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>

'배열 구문'을 사용하여 종속성이있는 서비스를 만드는 방법

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 함수입니다. AngularJs 가 new 비하인드를 호출한다는 점만 제외하면 일반 자바 스크립트와 마찬가지로 수행 할 것입니다.

서비스의 경우 기억해야 할 엄지 손가락 규칙이 하나 있습니다.

서비스는 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() 보다 훨씬 강력하고 유연합니다.

.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);

재 방문

클로저 (closure) 란 무엇입니까?

클로저는 로컬에서 사용되지만 범위를 정의하는 변수를 참조하는 함수입니다.

다음은 클로저의 예입니다.

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 - 템플릿의 내용과 리소스를 살균하고 렌더링합니다.

'배열 구문'을 사용하여 종속성이있는 서비스를 만드는 방법

서비스 등록

서비스와 공장의 차이점