웹 프론트엔드 JS 튜토리얼 Angular_AngularJS에 내장된 $http, $location 등의 서비스를 효율적으로 활용

Angular_AngularJS에 내장된 $http, $location 등의 서비스를 효율적으로 활용

May 16, 2016 pm 03:09 PM
angular

AngularJS는 몇 가지 공통 기능을 쉽게 구현할 수 있는 다양한 내장 서비스를 제공합니다. 다음은 Angular에서 일반적으로 사용되는 내장 서비스를 요약한 것입니다.
1.$위치 서비스

$location服务用于返回当前页面的URL地址,示例代码如下:
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $location) { 
 $scope.myUrl = $location.absUrl(); 
}); 
로그인 후 복사

여기에서는 $scope 객체에 대해 myUrl 변수가 정의된 다음 $location 서비스를 사용하여 URL 주소를 읽고 이를 myUrl에 저장합니다.
2..$http 서비스
$http는 AngularJS에서 가장 일반적으로 사용되는 서비스이며, 서버에서 데이터를 전송하는 데 자주 사용됩니다. 아래 예에서 서비스는 서버에 요청을 보내고 애플리케이션은 서버에서 보낸 데이터로 응답합니다.

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
 $http.get("welcome.htm").then(function (response) { 
  $scope.myWelcome = response.data; 
 }); 
}); 
로그인 후 복사

3.$timeout() 서비스와 $interval() 서비스
이 두 서비스의 기능은 JavaScript의 setTimeout() 및 setTimeInterval 기능에 해당합니다. 간단한 실시간 업데이트 시간 예시는 다음과 같습니다.

app.controller('myCtrl', function($scope, $interval) { 
 $scope.theTime = new Date().toLocaleTimeString(); 
 $interval(function () { 
  $scope.theTime = new Date().toLocaleTimeString(); 
 }, 1000); 
}); 
로그인 후 복사

Angular에서 제공하는 기본 서비스 외에도 service를 사용하여 자체 서비스를 정의할 수도 있습니다. 다음은 서비스 정의를 위한 기본 코드 프레임워크입니다.

app.service('hexafy', function() { 
 this.myFunc = function (x) { 
  return x.toString(16); 
 } 
}); 
로그인 후 복사

서비스를 정의한 후에는 내장된 Angular 서비스처럼 사용할 수 있습니다.

app.controller('myCtrl', function($scope, hexafy) { 
 $scope.hex = hexafy.myFunc(255); 
}); 
로그인 후 복사

위 내용은 Angular에서 일반적으로 사용되는 내장 서비스를 요약한 것입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다. Feb 28, 2022 am 11:10 AM

Angular의 메타데이터와 데코레이터에 대해 이야기해 보겠습니다.

Ubuntu 24.04에 Angular를 설치하는 방법 Ubuntu 24.04에 Angular를 설치하는 방법 Mar 23, 2024 pm 12:20 PM

Ubuntu 24.04에 Angular를 설치하는 방법

각도 학습 상태 관리자 NgRx에 대한 자세한 설명 각도 학습 상태 관리자 NgRx에 대한 자세한 설명 May 25, 2022 am 11:01 AM

각도 학습 상태 관리자 NgRx에 대한 자세한 설명

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석 Oct 17, 2022 pm 08:04 PM

각도에서 monaco-editor를 사용하는 방법에 대한 간략한 분석

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Angular의 서버 측 렌더링(SSR)을 탐색하는 기사 Dec 27, 2022 pm 07:24 PM

Angular의 서버 측 렌더링(SSR)을 탐색하는 기사

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? 프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까? Jul 26, 2022 pm 07:18 PM

프로젝트가 너무 크면 어떻게 해야 하나요? Angular 프로젝트를 합리적으로 분할하는 방법은 무엇입니까?

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발 Apr 21, 2022 am 10:45 AM

Angular + NG-ZORRO로 백엔드 시스템을 빠르게 개발

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. 각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다. Sep 08, 2022 pm 08:29 PM

각도-날짜/시간 선택기 형식을 사용자 정의하는 방법에 대해 이야기해 보겠습니다.

See all articles