[angularjs] 서비스, ​​지시문 및 모듈의 차이점은 무엇입니까?

Program / 글쓴이

나는 많은 문서를 읽었으며 점점 더 혼란스러워지고 있습니다. 나는 기본적으로 사이의 차이점을 알 수 없습니다

  • 서비스
  • 지령
  • 기준 치수

많은 맞춤 구성 요소가 있습니다. 때로는 지시어, 때로는 서비스를 사용합니다. 항상 모듈로 시작합니다. 누군가이 세 가지 유형의 차이점이 무엇인지 예를 들어 설명 할 수 있습니까?

답변

지시어, 서비스, 상수 등과 같은 다른 많은 것들을 연결하는 장소로 모듈을 생각하십시오. 모듈은 다른 모듈에 주입되어 높은 수준의 재사용을 제공 할 수 있습니다.

앵귤러 앱을 작성할 때 애플리케이션 코드 (템플릿없이) 인 최상위 모듈을 갖게됩니다.

서비스는 주로 컨트롤러간에 통신하는 방법이지만 한 서비스를 다른 서비스에 삽입 할 수 있습니다. 서비스는 종종 데이터 저장소에 접근하는 방법으로 사용되며 사람들은 ngResource와 같은 각도 API를 래핑합니다. 이 기술은 테스트 (특히 모의)를 매우 쉽게하기 때문에 유용합니다. 인증, 로깅 등과 같은 다른 작업을 수행하는 서비스를 가질 수 있습니다.

지시문은 위젯을 작성하거나 jquery 플러그인과 같은 기존 항목을 래핑하는 데 사용됩니다. 기존 플러그인을 감싸는 것은 어려울 수 있으며이를 수행하는 이유는 플러그인과 각도 사이에 양방향 데이터 바인딩을 설정하는 것입니다. 양방향 데이터 바인딩이 필요하지 않은 경우에는 랩핑 할 필요가 없습니다.

지시어는 DOM 조작, DOM 이벤트 포착 등을위한 장소이기도합니다. 컨트롤러 나 서비스에서 DOM 관련 작업을 수행해서는 안됩니다. 지시문을 작성하는 것은 꽤 복잡 할 수 있습니다. IMHO, 나는 당신이 찾고있는 것을 할 수있는 것을 찾기 위해 API를 먼저 보거나 Angular의 Google 그룹에 조언을 요청하는 것이 좋습니다.

답변

내 개인 메모 (주로 문서, Google 그룹 게시물 및 SO 게시물의 스 니펫)에서 :

모듈

  • 네임 스페이스 / 그룹 서비스, 지시문, 필터, 구성 정보 및 초기화 코드를 제공합니다.
  • 전역 변수를 피하는 데 도움
  • $ injector를 설정하는 데 사용되며, 모듈에 의해 정의 된 것들 (또는 전체 모듈 자체)이 다른 곳에 주입 될 수 있도록합니다 (종속성 주입 물건)
  • 각도 모듈은 CommonJS 또는 Require.js와 관련이 없습니다. AMD 또는 Require.js 모듈과 달리 Angular 모듈은 스크립트로드 순서 또는 지연된 스크립트 페치 문제를 해결하려고하지 않습니다. 이러한 목표는 직교하며 두 모듈 시스템이 나란히 살면서 목표를 달성 할 수 있습니다 (문서가 주장함).

서비스

  • 싱글 톤이므로 정의한 각 서비스의 인스턴스는 하나뿐입니다. 싱글 톤으로서 스코프의 영향을받지 않으므로 여러 뷰 / 컨트롤러 / 지시문 / 기타 서비스를 통해 공유 할 수 있습니다.
  • 다음과 같은 경우에 사용자 정의 서비스를 작성할 수 있습니다.
    • 둘 이상의 사물이 동일한 데이터에 액세스해야하거나 (루트 범위를 사용하지 않음) 데이터를 깔끔하게 캡슐화하려는 경우
    • 예를 들어 웹 서버와의 상호 작용을 캡슐화하려는 경우 (서비스에서 $ resource 또는 $ http 확장)
  • 기본 제공 서비스는 ‘$’로 시작합니다.
  • 서비스를 사용하려면 종속 항목 (예 : 컨트롤러 또는 다른 서비스 또는 지시문)에 종속성 주입이 필요합니다.

지시어 (아래 항목 중 일부는 본질적으로 동일한 것을 말하지만 때로는 약간 다른 표현이 많은 도움이된다는 것을 알았습니다)

  • 모델 상태가 변경 될 때 DOM을 업데이트합니다.
  • HTML 어휘 확장 = HTML 새로운 트릭을 가르칩니다.
    Angular에는 웹 응용 프로그램을 작성하는 데 유용한 지시문 (예 : ng- * stuff)이 내장되어 있지만 HTML을 DSL (declarative Domain Specific Language)로 변환 할 수 있도록 직접 추가 할 수 있습니다. 예를 들어, Angular 홈 페이지의 <tabs> 및 <pane> 요소는 “구성 요소 작성”데모입니다.
    • 명확하지 않은 내장 지시문 ( “ng”로 시작하지 않기 때문에) : a, 양식, 입력, 스크립트, 선택, 텍스트 영역. Angular에서는 이것들이 모두 정상보다 더 많은 일을합니다!
  • 지시문을 사용하면 “HTML을 구성 할 수 있습니다”. 지시문은 종종 ng-include보다 낫습니다. 예를 들어 주로 데이터 바인딩을 사용하여 많은 HTML을 작성하기 시작하면 해당 HTML을 (재사용 가능한) 지시문으로 리팩토링하십시오.
  • Angular 컴파일러를 사용하면 HTML 요소 또는 속성에 동작을 추가하고 사용자 지정 동작으로 새로운 HTML 요소 또는 속성을 만들 수도 있습니다. Angular는 이러한 비헤이비어 확장 지시문을 호출 합니다 .
    • 모두 정리하면 지시어는 Angular 컴파일러가 DOM에서이를 만날 때 실행되는 함수 일뿐입니다.
  • 지시문은 주석, 속성, 요소 이름, 클래스 이름 또는 이름의 존재에 의해 트리거되는 동작 또는 DOM 변환입니다. 지시문은 (HTML) 컴파일 프로세스에서 특정 HTML 구문이 발견 될 때 트리거되어야하는 동작입니다. 지시문은 요소 이름, 속성, 클래스 이름 및 주석에 배치 할 수 있습니다.
    • 대부분의 지시문은 속성으로 만 제한됩니다. 예를 들어 DoubleClick은 맞춤 속성 지정 문 만 사용합니다.
  • 또한 참조 AngularJS와 지시어는 무엇입니까?

모듈에서 Angular 사물 (종속성 주입 항목)을 정의하고 그룹화합니다.
서비스에서 데이터를 공유하고 웹 서버 상호 작용을 래핑합니다.
지시문에서 HTML을 확장하고 DOM 조작을 수행하십시오.
그리고 컨트롤러를 가능한 한 “얇게”만드십시오.

답변