Angular 4.0 학습 튜 토리 얼 의 구조 에 대한 상세 한 설명

머리말
구 글 은 얼마 전 인기 있 는 Angular JavaScript 프레임 워 크 의 4.0 버 전 을 발표 했다.이 버 전 은 생 성 코드 의 부 피 를 줄 이 고 프레임 워 크 를 유지 하 는 간소화 발표 계획 에 주력 했다.
오랫동안 이런 비교적 개념 적 인 것 을 쓰 지 않 았 지만,나 는 지식 구 조 를 형성 하지 못 하면 학습 효율 이 크게 떨 어 질 것 이 라 고 생각한다.여기 서 제 가 이해 한 지식 을 여러분 께 공유 하고 일부 내용 은 공식 문 서 를 참조 합 니 다.다음은 주제 로 들 어 갑 니 다.
앵 귤 러 구조 개관
먼저 정부 에서 내 놓 은 구조 도 를 살 펴 보 자.

구조 개관
이 구조 도 는 Angular 응용 중의 8 개의 주요 구조 블록 을 보 여 주 었 다.

모듈(module)

구성 요소(component)

템 플 릿(template)

메타 데이터(metadata)

데이터 바 인 딩(data binding)

명령(directive)

서비스(서비스)

주입 의존(dependency injection)

다음은 제 가 순서대로 그림 을 결합 해서 설명 하 겠 습 니 다.
1.모듈(모듈)
Angular 나 ionic 에서 새로 만 든 프로젝트 는 하나의 루트 모듈 이 존재 합 니 다.기본 이름 은 AppModule 입 니 다.모듈 화 를 사용 하여 애플 리 케 이 션 을 만 들 었 다 면 AppModule 을 포함 하여 모든@NgModule 장식 기 클래스 가 존재 합 니 다.새로 만 든 페이지 는 게 으 른 로 딩 을 사용 하지 않 으 면@NgModule 에서 먼저 설명 하고 사용 해 야 합 니 다.
다음은 예 를 들 어@NgModule 의 내용 을 간단히 소개 하 겠 습 니 다.

//app.module.ts

import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
 imports:  [ BrowserModule ],
 providers: [ Logger ],
 declarations: [ AppComponent ],
 exports:  [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

imports 이 모듈 에서 설명 한 구성 요소 템 플 릿 에 필요 한 클래스 가 있 는 다른 모듈 입 니 다.

providers 서비스의 창시자 이 고 전체 서비스 목록 에 가입 하면 모든 부분 을 응용 할 수 있 습 니 다.

declarations 는 이 모듈 에 있 는 보기 류 를 설명 합 니 다.Angular 는 세 가지 보기 종류 가 있 습 니 다.구성 요소,명령,파이프 입 니 다.

exports declarations 의 부분 집합 은 다른 모듈 의 구성 요소 템 플 릿 에 사용 할 수 있 습 니 다.

boottstrap 에서 지정 한 주 보기(루트 구성 요소 라 고 함)는 모든 다른 보기 의 숙주 입 니 다.루트 모듈 만 boottstrap 속성 을 설정 할 수 있 습 니 다.

그림 에서 의 의미:그림 왼쪽 상단 을 보면 모듈 은 모듈 속성 메타 데이터 대상 을 설명 하 는 데 사 용 됩 니 다.
2.구성 요소(component),템 플 릿(template),메타 데이터(metadata)
이번에 우 리 는 이 세 가 지 를 함께 이야기 해서 먼저 이 코드 를 좀 봅 시다.

//hero-list.component.ts

@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Component
구성 요 소 는 장식 기 입 니 다.설정 대상 을 받 아들 일 수 있 습 니 다.Angular 는 이러한 정 보 를 바탕 으로 구성 요소 와 보 기 를 만 들 고 보 여 줍 니 다.

selector:CSS 선택 기 는 Angular 에 게 부모 급 HTML 에서탭 을 찾 아 이 구성 요 소 를 만 들 고 삽입 하 라 고 알려 줍 니 다.

templateUrl:구성 요소 HTML 템 플 릿 의 모듈 상대 주소 입 니 다.template 를 사용 하면'''라 는 기호 로 HTML 코드 를 직접 작성 합 니 다.

providers:구성 요소 에 필요 한 서비스 의존 주입.

template
템 플 릿 은 바로 그 HTML 코드 입 니 다.templateUrl 로 바깥 에 도입 할 수도 있 고 template`로 직접 쓸 수도 있 습 니 다.
metadata
메타 데이터 장식 기 는 유사 한 방식 으로 Angular 의 행 위 를 지도 한다.예 를 들 어@Input,@Output,@Injectable 등 은 가장 자주 사용 하 는 장식 기 이 므 로 용법 은 여기 서 전개 되 지 않 습 니 다.
그림 에서 의 의미:그림 중간 에 있 는 것 을 보고 템 플 릿,메타 데이터 와 구성 요소 가 이 보 기 를 공동으로 묘사 합 니 다.
3.데이터 바 인 딩(데이터 바 인 딩)
여기에 모두 네 가지 데이터 바 인 딩 을 보 여 줍 니 다.예제 코드 를 보 세 요.

//           hero.name    
<li>{{hero.name}}</li>

//         selectedHero        hero   
<hero-detail [hero]="selectedHero"></hero-detail>

//                    selectHero  
<li (click)="selectHero(hero)"></li>

//                        。               ，           
<input [(ngModel)]="hero.name">

여러 괄호 에 눈 이 침침 해 졌 는 지 정리 해 보 세 요.

쌍 화 괄호 는 단 방향 바 인 딩 이 고 전달 하 는 것 은 값 이다.방향 은 구성 요소->템 플 릿 입 니 다.

괄호 는 단 방향 바 인 딩 이 고 속성 을 전달 합 니 다.방향 은 부모 구성 요소->하위 구성 요소 입 니 다.

괄호 는 이벤트 바 인 딩,클릭 처리 등 이벤트(action)입 니 다.

방 괄호 세트 원 괄호 는 양 방향 연결 이 고 방향 은 구성 요소<->템 플 릿 입 니 다.

그림 에서 의 의미:그림 중간 에 있 는 부분 을 보고 데이터 바 인 딩 은 템 플 릿 과 구성 요소 에 데이터 상호작용 을 제공 합 니 다.
4.명령 어(directive)
엄 밀 히 말 하면 구성 요 소 는 하나의 명령 이지 만 구성 요 소 는 매우 독특 하고 Angular 에서 중심 에 있 기 때문에 구조 개관 에서 우 리 는 구성 요 소 를 명령 에서 독립 시 켰 다.
우리 가 여기 서 언급 한 지령 은 두 가지 유형 이 있다.
구조 형 structural 명령 과 속성 attribute 형 명령.
원문 을 틀 어 구성 요소 가 확실히 명령 이 라 고 증명 하 세 요.
While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.
Two other kinds of directives exist: structural and attribute directives.
구조 적 명령 은 ngFor,ngIf 와 같은 것 으로 DOM 에 요 소 를 추가,제거,교체 함으로써 구 조 를 수정 합 니 다.
속성 형 명령 은 ngModel 과 같은 것 으로 기 존 요소 의 외관 이나 행 위 를 수정 하 는 데 사 용 됩 니 다.
Angular 는 구조 레이아웃(예 를 들 어 ngSwitch)을 수정 하거나 DOM 요소 와 구성 요소 의 여러 가지 측면(예 를 들 어 ngStyle 과 ngClass)을 수정 하 는 명령 도 소량 있 습 니 다.그 후에 나 는 그들 이 사용 하 는 방법 을 말 하 는 문장 을 단독으로 쓸 것 이다.
그림 에서 의 의미:그림 오른쪽 상단 에 있 는 부분 을 보 세 요.구성 요 소 는 템 플 릿 이 있 는 명령 입 니 다.템 플 릿 을 향 한 기능 만 확장 되 었 습 니 다.
5.서비스(서비스)
공식 문서 의 개념:
서 비 스 는 넓 은 의미 의 범주 로 값,함수 또는 응용 에 필요 한 특성 을 포함한다.서 비 스 는 특별히 Angular 에 속 하 는 특성 이 없다.Angular 는 서비스 에 대해 서도 정의 가 없고 서비스의 기본 클래스 도 정의 되 지 않 았 으 며 서 비 스 를 등록 할 곳 도 없 었 다.
이것 은 iOS 나 안 드 로 이 드 에 httpService 라 는 종 류 를 따로 만 들 고 네트워크 요청 서 비 스 를 봉인 한 것 처럼 구체 적 인 것 이 아니 라 하나의 개념 으로 이해 하면 된다.
그림 에서 의 의미:그림 왼쪽 아래 에 있 는 부분 을 보고 서 비 스 는 재 활용 가능 한 업무 논 리 를 포장 하 는 데 사용 된다.
6.의존 주입(dependency injection)
의존 주입 은 클래스 의 새로운 인 스 턴 스 를 제공 하 는 방식 이 며,클래스 처리 에 필요 한 모든 의존 도 책임 집 니 다.대부분의 의존 은 서비스 다.Angular 는 새로운 구성 요소 와 구성 요소 에 필요 한 서 비 스 를 제공 하기 위해 의존 주입 을 사용 합 니 다.
예 를 들 어 우 리 는 특정한 구성 요소 에 홈 서비스 라 는 서 비 스 를 가 져 와 야 합 니 다.이 코드 를 보 세 요.

constructor(private service: HeroService) { 
 ...
}

이 constructor 는 구조 함수 로 constructor 에 주입 하여 진행 합 니 다.앞 에 private,Public 라 고 쓰 여 있 는 것 이 이상 하 다 고 생각 할 수도 있 습 니 다.이것 은 TypeScript 문법 이 비교적 특수 하고 습관 이 좋 습 니 다.
Angular 가 구성 요 소 를 만 들 때 먼저 구성 요소 에 필요 한 서비스 에 주입 기 injector 를 요청 합 니 다.우 리 는 먼저 주입 기 injector 로 HeroService 에 공급 자 provider 를 등록 해 야 합 니 다.
아래 코드 를 보 세 요.providers 에 써 야 사용 할 수 있다 는 뜻 입 니 다.

@Component({
 selector: 'hero-list',
 templateUrl: './hero-list.component.html',
 providers: [ HeroService ]
})

그림 에서 의 의미:그림 왼쪽 아래 에 있 는 부분 을 보고 주입 에 의존 하여 서 비 스 를 가 져 옵 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.