AngularJS 서비스 (서비스)
AngularJS에서는 자신만의 서비스를 만들거나 내장 서비스를 사용할 수 있습니다.
서비스 란 무엇입니까?
AngularJS에서 서비스는 AngularJS 응용 프로그램에서 사용할 수있는 함수 또는 객체입니다.
AngularJS에는 30 개 이상의 내장 서비스가 있습니다.
현재 페이지의 URL 주소를 반환 할 수있는 $ 위치 서비스가 있습니다.
예
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 현재 페이지 URL : </p> <h3> {{myurl}} </h3> </div> <p>이 인스턴스는 내장 된 $ 위치 서비스를 사용하여 현재 페이지의 URL을 얻습니다. </p> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope, $ location) {$ scope.myurl = $ location.absurl ()); </script> </body> </html>실행 결과 :
현재 페이지의 URL :
http://www.runoob.com/try.php?filename=try_ng_services
이 인스턴스는 내장 $ 위치 서비스를 사용하여 현재 페이지의 URL을 얻습니다.
참고 : $ 위치 서비스는 컨트롤러로 매개 변수로 전달됩니다. 사용하려면 컨트롤러에서 정의해야합니다.
서비스를 사용하는 이유는 무엇입니까?
$ HTTP는 AngularJS 응용 프로그램에서 가장 일반적으로 사용되는 서비스입니다. 서비스는 서버에 요청을 보내고 응용 프로그램은 서버가 전송 한 데이터에 응답합니다.
AngularJS는 항상 응용 프로그램을 모니터링하고 이벤트 변경을 처리합니다. AngularJS는 Window.Location 객체를 사용하는 것보다 $ 위치 서비스를 더 잘 사용합니다.
$ HTTP 서비스
$ HTTP는 AngularJS 응용 프로그램에서 가장 일반적으로 사용되는 서비스입니다. 서비스는 서버에 요청을 보내고 응용 프로그램은 서버가 전송 한 데이터에 응답합니다.
예
$ http 서비스를 사용하여 서버에서 데이터를 요청하십시오.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 환영 : </p> <> {{mywelcome}} <> </div> <p> $ http 서비스는 서버에서 정보를 요청하고 반환 된 값은 변수 "mywelcome"에 배치됩니다. </p> <cript> var app = angular.module ( 'myApp', []); app.controller ( 'myctrl', function ($ scope, $ http) {$ http.get ( "belopp.htm").실행 결과 :
환영 메시지 :
방문에 오신 것을 환영합니다
$ http 서비스는 서버에서 정보를 요청하고 반환 된 값은 변수 "mywelcome"에 배치됩니다.
위는 매우 간단한 $ http 서비스 인스턴스입니다. 더 많은 $ HTTP 서비스 애플리케이션은 AngularJS HTTP 자습서를 확인하십시오.
$ 타임 아웃 서비스
AngularJS $ 타임 아웃 서비스는 JS Window.settimeout 함수에 해당합니다.
예
정보는 2 초 안에 표시됩니다.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 정보는 2 초 후에 표시됩니다. </p> <cript> var app = app = angular.module ( 'myApp', []); app.controller ( 'myctrl', function ($ scope, $ timeout) {$ scope.myheader = "Hello World!"; $ timeout (function () {$ scope.myheader = "오늘은 어때?";}, 2000);}); </script> </body> </html>실행 결과 :
정보는 2 초 안에 표시됩니다.
오늘 기분이 어떠세요?
$ 시간 초과 액세스 지정된 밀리 초 후 지정된 기능을 실행합니다.
$ 간격 서비스
AngularJS $ 간격 서비스는 JS Window.setInterval 함수에 해당합니다.
예
2 초마다 정보 표시 :
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 현재 시간은 다음과 같습니다. </p> <h1> {{thetime}} </h1> </div> <p> $ 간격 액세스는 함수를 호출하거나 지정된 기간 (밀리 초)로 표현식을 계산합니다. </p> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope, $ intermal) {$ scope.thetime = new date (). tolocaletimestring (); $ interval (); $ interval (); tolocaletimestring (). 1000);}); </script> </body> </html>실행 효과 :
이제 시간은 다음과 같습니다.
오후 3:41:09
$ 간격 액세스는 지정된 기간 (밀리 초)에 함수 또는 수를 호출합니다.
사용자 정의 서비스를 만듭니다
모듈에 링크 된 사용자 정의 액세스를 만들 수 있습니다.
Hexafy라는 액세스를 만듭니다.
app.service ( 'hexafy', function () {this.myfunc = function (x) {return x.toString (16);}});사용자 정의 액세스를 사용하려면 필터를 정의 할 때 독립적으로 추가해야합니다.
예
사용자 정의 서비스 헥사피를 사용하여 숫자를 16 헥 세파이로 변환하십시오.
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 255의 헥사 그램은 다음과 같습니다. {this.myfunc = function (x) {return x.tostring (16)); app.controller ( 'myctrl', function ($ scope.hex = hexafy.myfunc (255); </script> </html>실행 결과 :
255의 16 진수 시스템은 다음과 같습니다.
FF
16 진수 변환을위한 사용자 정의 서비스 :
필터에서 사용자 정의 서비스를 사용하십시오
사용자 정의 서비스를 작성하고 앱에 연결하면 컨트롤러, 지침, 필터 또는 기타 서비스에서 사용할 수 있습니다.
필터 MyFormat에서 서비스 헥사피를 사용하십시오.
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <div ng-app = "myApp"> using services 필터 : <H1> {{255 | myformat}} </h1> </div> <cript> var app = angular.module ( 'myapp', []); app.service ( 'hexafy', function () {this.myfunc = function (x) {return x.tostring (16);}}); function (x) {return hexafy.myfunc (x);}); </script> </body> </html>실행 효과 :
필터에서 서비스 사용 :
FF
객체 배열에서 값을 얻을 때 필터를 사용할 수 있습니다.
서비스 헥사피 생성 :
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "myctrl"> <p> 배열을 얻을 때 필터 사용 [255, 251, 200] 값 : </p> <ul> <li ng-repeat = "x in counts"> {{x | myformat}} </li> </ul> <p> 필터는 소수점을 16 진수로 변환하기 위해 서비스를 사용합니다. </p> </div> <cript> var app = angular.module ( 'myapp', []); app.service ( 'hexafy', function () {this.myfunc = function (x) {return x.toString (16);}); App.filter ( 'myformat', [ 'hexafy', 기능 hexafy.myfunc (x);}); app.controller ( 'myctrl', function ($ scope) {$ scope.counts = [255, 251, 200];}); </script> </body> </html>실행 효과 :
배열을 얻을 때 필터 사용 [255, 251, 200] 값 :
필터는 서비스를 사용하여 십진수를 16 진수로 변환합니다.
위는 AngularJS 서비스에 대한 정보를 편집 한 것입니다. 나중에 계속 추가 할 것입니다. 도움이 필요한 친구의 경우 참조하십시오.