> 웹 프론트엔드 > JS 튜토리얼 > Anglejs에는 몇 개의 서비스가 있나요? Anglejs의 서비스에 대한 자세한 분석

Anglejs에는 몇 개의 서비스가 있나요? Anglejs의 서비스에 대한 자세한 분석

寻∝梦
풀어 주다: 2018-09-08 16:51:37
원래의
1362명이 탐색했습니다.

이 글은 주로 angularjs의 여러 서비스에 대한 자세한 분석을 다루고 있습니다. Anglejs 서비스의 사용법과 차이점에 대한 소개도 있습니다. 이제 이 글을 함께 살펴보겠습니다.

전체 소개

잘 계층화된 In Angular 애플리케이션의 경우 컨트롤러 계층은 매우 얇아야 합니다. 즉, 애플리케이션의 대부분의 비즈니스 로직과 영구 데이터는 서비스에 배치되어야 합니다.

이러한 이유로 AngularJS의 여러 공급자 간의 차이점을 이해하는 것이 필요합니다.
Provider에서 만든 새로운 서비스를 주입에 사용할 수 있습니다. 포함:

  • provider

  • factory

  • #🎜 🎜#service

  • constant

  • value

  • # 🎜🎜#각각의 사용법과 차이점

provider

은 두 부분으로 구성된 구성 가능한 서비스를 생성하는 데 사용됩니다. 첫 번째 부분의 변수와 함수는 app.config 함수에서 액세스할 수 있으며 다른 곳에서 액세스하기 전에 수정할 수 있습니다. 정의는 다음과 같습니다:

app.provider('myProvider', function(){
    var a = '';    var func = function(){};
})
로그인 후 복사

app.config 함수에서 a를 수정합니다. 이는 간단한 팩토리가 있을 때 공급자를 사용하는 이유이기도 합니다.

app.config(function(myProviderProvider){
    myProvider.a = 'hello world';
})
로그인 후 복사

두 번째 부분의 변수와 함수는 $get() 함수에 의해 반환되며 공급자를 전달하는 모든 컨트롤러에서 액세스할 수 있습니다.

app.provider('myProvider', function(){
    this.$get = function(){
        return {
            foo: function(){},
            a: a
        }
    }
})
로그인 후 복사

factory

factory 객체를 반환합니다. 객체를 생성하고, 객체에 속성을 추가하고, 객체를 반환하면 됩니다. 모든 속성을 사용하려면 컨트롤러에 팩토리를 삽입하세요.

app.factory('myFactory', function(){
    var fac = {};
    fac.a = 'hello world';
    fac.foo = function(){};    return fac;
})
로그인 후 복사

factory의 두 번째 매개변수는 $get in Provider에 해당하는 함수 구현임을 알 수 있습니다.

service

service는 생성자와 유사하며 new 키워드를 통해 개체를 인스턴스화하고 여기에 직접 일부 속성과 메서드를 추가합니다. 반환 값으로 반환됩니다.

app.service('myService', function(){
    var a = '';    this.setA = function(){};    this.getA = function(){};    this.foo = function(){};
})
로그인 후 복사

myService에 삽입된 컨트롤러는 myService에 바인딩된 setA(), getA() 및 foo() 메서드에 액세스할 수 있습니다.

constant

constant는 상수를 정의하는 데 사용됩니다. 한 번 정의하면 변경할 수 없습니다. 어디에나 주입할 수 있지만 데코레이터로 장식할 수는 없습니다.

app.constant('APP_KEY', 'a1s2d3f4')
로그인 후 복사

value

상수와 마찬가지로 값을 정의하는 데 사용할 수 있습니다. 하지만 상수와의 차이점은 수정이 가능하고 데코레이터로 장식할 수 있으며 구성에 주입할 수 없다는 것입니다.

app.value('version', '1.0')
로그인 후 복사

value는 일반적으로 애플리케이션의 초기 값을 설정하는 데 사용됩니다. (자세한 내용을 알고 싶으면 PHP 중국어 웹사이트

AngularJS Development Manual

열을 참조하세요.) decorator

은 특별합니다. 제공자가 아닙니다. 소스코드에서 볼 수 있듯이 공급자() 메소드를 통해서는 상수가 생성되지 않기 때문에 상수를 제외한 다른 공급자를 장식하는데 사용된다.

다음은 데코레이터를 사용하여 값을 장식하는 밤나무입니다.

app.value('version', '1.0');
app.decorator('version', function ($delegate) {
    return $delegate + '.1';
})
로그인 후 복사

기존 myService 서비스를 이용하고 싶은데, 원하는 인사말 기능이 부족하다면. 서비스가 수정될 수 있나요? 대답은 '아니오'입니다! 그러나 장식할 수 있습니다.

app.decorator('myService', function($delegate){
    $delegate.greet = function(){
        return "Hello, I am a new function of 'myService'";
    }
})
로그인 후 복사

$delegate는 실제 서비스 인스턴스를 나타냅니다.

서비스를 장식하는 기능은 매우 실용적입니다. 특히 타사 서비스를 사용하려는 경우에는 코드를 프로젝트에 복사할 필요가 없고 약간만 수정하면 됩니다.


공장 대신 공급자를 사용해야 하는 경우는 언제인가요?

provider는 Factory의 향상된 버전입니다. 구성 가능한 팩토리가 필요한 경우 공급자를 사용하십시오.

AngularJS 애플리케이션을 실행하는 과정에 대한 간략한 소개는 구성 단계와 실행 단계의 두 단계로 나누어집니다. 구성 단계에서는 공급자가 설정됩니다. 이는 지시문, 컨트롤러, 필터 및 기타 사항이 설정되는 단계이기도 합니다. 실행 단계에서 AngularJS는 DOM을 컴파일하고 애플리케이션을 시작합니다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트

AngularJS 사용자 설명서

열로 이동하여 궁금한 사항을 알아보세요.) 아래에 메시지를 남겨주세요.

위 내용은 Anglejs에는 몇 개의 서비스가 있나요? Anglejs의 서비스에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿