AngularJS는 서비스를 사용하는 아키텍처에서 "우려 분리"의 개념을 지원합니다. 서비스는 JavaScript 기능이며 하나의 특정 작업 만 수행 할 책임이 있습니다. 이것은 또한 유지 관리 및 테스트를하는 별도의 엔티티로 만듭니다. 컨트롤러, 필터는 요구 사항의 기초로 호출 할 수 있습니다. 이 서비스는 AngularJS의 종속성 주입 메커니즘을 사용하여 정상적으로 주입합니다.
AngularJS는 $ http, $ route, $ wind $ 경로는 라우팅 정보 등을 정의하는 데 사용됩니다. 내장 서비스는 항상 $ 기호로 접두사됩니다.
서비스를 만드는 방법에는 두 가지가 있습니다.
공장
제공하다
공장 방법 사용
공장 방법을 사용하여 먼저 공장을 정의한 다음 메소드를 할당합니다.
var mainApp = Angular.Module ( "mainApp", []); mainApp.Factory ( 'mathservice', function () {var factory = {}; factory.multiply = function (a, b) {return a * b} return factory;});서비스 사용 방법
서비스 방법을 사용하여 서비스를 정의한 다음 메소드를 할당합니다. 또한 이미 사용 가능한 서비스를 주입합니다.
MainApp.Service ( 'calcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}});예
다음 예제는 위의 모든 지침을 보여줍니다.
testangularjs.html
<html> <head> <title> angular js forms </title> </head> <h2> Angularjs 샘플 애플리케이션 </h2> <div ng-app = "mainapp"ng-controller = "calccontroller"> <p> 숫자를 입력하십시오 : <input type = "number"numbut " ng-click = "square ()"> x <sup> 2 </sup> </sup> </button> <p> 결과 : {{result}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> Angular.Module ( "MainApp", []); mainApp.Factory ( 'mathservice', function () {var factory = {}; factory.multiply = function (a, b) {return a * b} return factory;}); MainApp.Service ( 'calcservice', function (mathservice) {this.square = function (a) {return mathservice.multiply (a, a);}}); mainApp.controller ( 'calccontroller', function ($ scope, calcservice) {$ scope.square = function () {$ scope.result = calcservice.square ($ scope.number);}}); </script> </body> </html>결과
웹 브라우저에서 Open TextAngularjs.html. 결과는 다음과 같습니다.
위는 AngularJS 서비스의 기본 정보입니다. 우리는 향후 관련 정보를 계속 구성 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!