요약 Angular 5 빠 른 입문

개술
Angular 5 라 고 불리 지만 2012 년 에 태 어 난 전단 프레임 워 크 의 네 번 째 버 전 일 뿐이다.

angular history
거의 반년 만 에 새로운 버 전 을 발표 하 는 것 처럼 보이 지만 실제로 재 작성 한 버 전 2 부터 개발 인터페이스 와 핵심 사상 이 안정 되 고 대체적으로 이전 버 전과 의 호환성 을 유지 하고 있다.
5.이 새로운 버 전에 서 Angular 팀 은 다음 과 같은 특성 에 중점 을 두 었 습 니 다.

점진 적 웹 응용 을 구축 하기 쉽다―P__rogressive __W__eb __A__pp

유 틸 리 티 구축 을 사용 하여 무용 코드 를 제거 하여 더 작은 응용,더 빠 른 네트워크 로드 시간

을 얻 을 수 있 습 니 다.

물 화 된 디자인 구성 요소 호 환 서버 렌 더 링

PWA 는 웹 애플 리 케 이 션 이 모 바 일 단말기 에서 네 이 티 브 애플 리 케 이 션 에 필적 하 는 사용자 체험 을 할 수 있 도록 구 글 이 제시 한 표준 이다.PWA 응용 프로그램 은 주로 Service Worker 와 브 라 우 저 캐 시 를 이용 하여 상호작용 체험 을 절약 합 니 다.핸드폰 데스크 톱 에 직접 배치 할 수 있 을 뿐만 아니 라 오프라인 응용 도 할 수 있 습 니 다.

pwa
2.각도 환경 도입
Angular 는 TypeScript 를 사용 하여 응용 프로그램 을 개발 하 는 것 을 추천 합 니 다.이 는 온라인 컴 파일 러(JIT)의 실시 간 컴 파일 코드 를 사용 하거나 개발 기간 에 사전 컴 파일 러(AOT)를 사용 하여 코드 를 미리 컴 파일 해 야 합 니 다.
이 번 거 로 운 과정 이 Angular 프레임 워 크 의 본질 에 대한 사고 에 영향 을 미 치지 않도록 온라인 작성 과 실험 에 적응 하기 위해 필요 한 설정 과 포장 을 진행 하 였 습 니 다.이제 라 이브 러 리 a5-loader 하나만 도입 하면 됩 니 다.
아래 그림 은 라 이브 러 리 의 구성 표시 입 니 다.그 중의 파란색 부품 은 모두 라 이브 러 리 에 포장 되 어 있 습 니 다.

a5-loader
Angular 프레임 이 파란색 이 아니 라 는 것 을 알 수 있 습 니 다.확실히,우 리 는 그것 을 a5-loader 에 포장 하지 않 고 모듈 로 더(SystemJS)를 응용 수요 에 따라 자동 으로 불 러 옵 니 다.이렇게 하 는 목적 은 응용 코드 를 후속 과정 에서 사용 하 는 백 엔 드 구축 방법 과 일치 하도록 하 는 것 이다.
이 라 이브 러 리 에 관심 이 있다 면 github 의http://github.com/hubwiz/a5-loader창 고 를 방문 하 세 요.
3.Angular 구성 요소 만 들 기
Angular 는 구성 요 소 를 위 한 전단 개발 프레임 워 크 입 니 다.C/S 도형 화 응용 개발 에 종사 한 적 이 있다 면 구성 요소 라 는 단어의 의 미 를 알 아야 한다.기본적으로 구성 요 소 는 도형 인터페이스 가 있 고 내재 적 논리 능력 을 가 진 프로그램 단원 을 대표 한다.다음 그림 은 탁구 전환 을 실현 하 는 세 가지 구성 요 소 를 보 여 줍 니 다.

component sample
구성 요 소 는 아주 좋 은 재 활용 성 을 제공 합 니 다.한 무더기 의 구성 요 소 를 바탕 으로 우 리 는 간단 한 풀 코드 를 사용 하면 상당히 복잡 한 상호작용 기능 을 실현 할 수 있 습 니 다.
이제 Angular 구성 요 소 를 만 듭 니 다.코드 는 상당히 간단 합 니 다.

@Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

Angular 프레임 워 크 에서 구성 요 소 는 Component 장식 기 를 사용 한 클래스 를 말 합 니 다.Component 장식 기의 역할 은 장식 되 어 있 는 클래스 에 메타 데이터 정 보 를 추가 하 는 것 입 니 다.

annotations
Angular 프레임 워 크 가 응용 프로그램 을 컴 파일 안내 할 때 이 메타 데이터 구조 보 기 를 사용 합 니 다.그 중의 두 개의 메타 데 이 터 는 매우 중요 하 다.

selector:구성 요소 숙주 요소 의 CSS 선택 자 는 구성 요소 가 DOM 트 리 에 있 는 렌 더 링 닻 점

을 설명 합 니 다.

template:구성 요소 의 템 플 릿,프레임 워 크 는 이 템 플 릿 을 청사진 으로 보 기 를 구축 합 니 다

4.Angular 모듈 생 성
Angular 프레임 워 크 의 핵심 은 구성 요소 화 이 며 디자인 목 표 는 대형 응용 개발 에 적응 하 는 것 이다.따라서 응용 개발 에 모듈(NgModule)이라는 개념 을 도입 하여 서로 다른 구성 요소(및 서비스)를 구성 하고 하나의 Angular 응용 은 적어도 하나의 모듈 을 만들어 야 한다.
자 바스 크 립 트 언어 자체 의 모듈 개념 과 구별 하기 위해 이 과정 에서 NG 모듈 을 사용 하여 Angular 모듈 을 표시 합 니 다.
구성 요소 와 유사 하 게 NG 모듈 은 NgModule 인 테 리 어 를 적용 한 클래스 입 니 다.예 를 들 어 다음 코드 는 NG 모듈 EzModule 을 만 들 었 습 니 다.

@NgModule({
 imports: [ BrowserModule ],
 declarations: [ EzComp ],
 bootstrap: [ EzComp ]
})
class EzModule{}

마찬가지 로 NgModule 장식 기 는 장 식 된 클래스 에 모듈 메타 데 이 터 를 추가 하 는 데 사용 되 며,장 식 된 클래스 의 를 볼 수 있 습 니 다.annotations__속성 으로 이 결 과 를 관찰 합 니 다:

ngmodule annotations
NgModule 장식 기 는 프레임 에 어떤 NG 모듈 을 불 러 오고 어떤 구성 요 소 를 컴 파일 하 며 어떤 구성 요 소 를 시작 해 야 하 는 지 알려 주 는 중요 한 메타 데 이 터 를 설명 합 니 다.

imports:도입 해 야 할 외부 NG 모듈

declarations:이 모듈 에서 만 든 구성 요 소 는 이 메타 데이터 에 추 가 된 구성 요소 가 컴 파일 됩 니 다

boottstrap:어떤 구성 요 소 를 시작 할 지 설명 합 니 다.컴 파일 된 구성 요소 여야 합 니 다

강조해 야 할 것 은 boottstrap 메타 데이터 성명 의 구성 요 소 는 컴 파일 된 구성 요소 여야 합 니 다.imports 메타 데 이 터 를 사용 하여 도입 한 외부 NG 모듈 에 속 하거나 declarations 메타 데이터 에 설 명 된 로 컬 구성 요소 에 속 합 니 다.
NG 모듈 BrowserModule 은 패키지@angular/platform-browser 로 정의 되 며,Angular 크로스 플랫폼 전략의 중요 한 구성 부분 입 니 다.BrowserModule 은 브 라 우 저 플랫폼 의 핵심 기능 실현 을 봉 인 했 고 이에 대응 하 는 다른 플랫폼 실현 은 다음 과 같다.

ServerModule:서버 구현

WorkerAppModule:WebWorker 구현

일반적으로 웹 애플 리 케 이 션 을 개발 할 때 브 라 우 저 모듈 이라는 NG 모듈 을 도입 해 야 합 니 다.
5.Angular 응용 프로그램 시작
앞의 과정 에서 우 리 는 구성 요소 와 NG 모듈 을 만 들 었 지만 메타 데 이 터 를 정의 한 것 같 아서 가치 있 는 코드 를 많이 쓰 지 않 았 다.
그러나 이것 이 바로 Angular 프레임 워 크 의 특징 이다.성명 식 개발 이다.이 메타 데 이 터 는 프레임 워 크 에 프로그램 을 시작 하 는 방법 을 설명 하 는 중요 한 정보 입 니 다.
시작 코드 는 간단 합 니 다.platformBrowserDynamic()공장 함 수 를 도입 하고 플랫폼 인 스 턴 스 를 만 들 며 지정 모듈 을 시작 합 니 다.

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
const pref = platformBrowserDynamic()
pref.bootstrapModule(EzModule)

√플랫폼 대상:PlatformRef
platformBrowserDynamic()함 수 는 PlatformRef 대상(Angular 가 플랫폼 에 대한 추상)을 되 돌려 줍 니 다.이 함수 의 가장 중요 한 역할 은 내부 에 실시 간()을 만 드 는 데 있 습 니 다.J__ust __I__n __T__ime)컴 파일 러 는 NG 모듈 과 구성 요 소 를 온라인 에서 실시 간 으로 컴 파일 할 수 있 습 니 다.이것 도 동적(Dynamic)이 라 고 불 리 는 이유 입 니 다.

dynamic bootstrap
플랫폼 대상 의 boottstrapModule()방법 은 지정 한 NG 모듈 을 시작 하 는 데 사 용 됩 니 다.대부분의 작업 은 JIT 컴 파 일 러 를 이용 하여 NG 모듈 과 구성 요 소 를 컴 파일 하 는 것 입 니 다.이 컴 파일 작업 이 완료 되면 시작 모듈 의 boottstrap 메타 정보 에 따라 지정 한 그룹 을 렌 더 링 합 니 다.
6.왜 이렇게 복잡 하지?
아마도 당신 은 이미 좀 복잡 하 다 고 느 꼈 을 것 입 니 다.단지 Hello,World 를 쓰기 위해 서 이렇게 많은 코드 를 써 야 합 니 다.
사실 이러한 복잡성 은 Angular 의 발전 에 따라 점차적으로 도 입 된 것 이다.좋 은 측면 에서 볼 때 개발 자 에 게 제공 할 수 있 는 옵션 이 점점 많아 지고 적용 장면 이 많아 졌 다.
예 를 들 어 Angular 2 정식 판 이전에 NG 모듈 이라는 개념 이 없 었 기 때문에 구성 요 소 를 하나 쓰 면 바로 애플 리 케 이 션 을 시작 할 수 있 습 니 다.Angular 팀 의 예상 애플 리 케 이 션 장면 은 대규모 전단 애플 리 케 이 션 개발 이기 때문에 명시 적 인 NG 모듈 성명 요구 도 쉽게 이해 할 수 있다.그러나 작은 애플 리 케 이 션 이라도 하나의 NG 모듈 만 사용 할 수 있 기 때문에 이 점 의 복잡성 증 가 는 많 지 않 고 이 신 개념 을 학습 하고 운용 하 는 비용 만 증가 했다.
또 하나의 분명 한 복잡성 은 다 중 플랫폼 전략의 도입 에 있다.Angular 는 애플 리 케 이 션 이 브 라 우 저,서버 등 여러 플랫폼(기본)을 뛰어넘어 직접 실행 할 수 있 도록 하고 싶 어 합 니 다.따라서 추상 적 인 중간 층 이 나 오 는 것 을 피 할 수 없다.우 리 는 응용 에서 해당 하 는 플랫폼 실현 모듈 을 명시 적 으로 선택해 야 한다.

multiple platform
세 번 째 복잡성 은 사전 컴 파일(AOT:Ahead Of Time)에 대한 지원 에서 비롯 된다.초기 에 Angular 는 즉시 컴 파일(JIT:Just In Time)만 있 었 다.즉,응용 코드 는 실행 할 때 컴 파일 된 것 이다.즉시 컴 파일 의 첫 번 째 문 제 는 응용 에서 컴 파일 러 코드 를 포장 해 야 한 다 는 것 이다.이것 은 최종 적 으로 발 표 된 응용 코드 를 증가 시 켰 다.
크기또 다른 문 제 는 컴 파일 에 시간 이 필요 하 다 는 점 이다.이것 은 사용자 가 응용 프로그램 을 여 는 대기 시간 을 증가 시 켰 다.따라서 현재 Angular 는 JIT 와 AOT 를 동시에 지원 하지만 JIT 컴 파일 을 시작 하 는 응용 프로그램 과 AOT 컴 파일 을 시작 하 는 응용 프로그램 은 현재 명시 적 으로 선택 해 야 합 니 다.

aot vs. jit
Angular 의 경우 컴 파일 은 입구 NG 모듈 정 의 를 NG 모듈 공장(NgModuleFactory)으로 전환한다.JIT 에 게 이 단 계 는 boottstrapModule()에 담 겨 있다.AOT 의 경우 생 성 모듈 공장 이 끝 났 으 며,응용 이 시 작 될 때 bootstrapModuleFactory()를 사용 하여 생 성 된 모듈 공장 을 호출 하면 된다.
AOT 컴 파일 은 보통 구축 단계 에서 사용 되 지만 브 라 우 저 에서 이 두 단계 로 나 누 는 과정 을 모 의 할 수 있 습 니 다.
7.Angular 의 초심 이해
프레임 자체 의 기능 이 강해 서 발생 하 는 복잡성 을 제외 하고 Angular 의 또 다른 복잡성 원천 은 고도 로 포 장 된 성명 식 API 에 있 기 때문에 개발 자 들 이 프레임 의 실현 체 제 를 추측 하고 통찰 하기 어렵 기 때문에 사용 하기 가 매우 허탈 하고 문제 가 발생 하면 오 류 를 분석 하기 어렵다.

angular error
Angular 를 블랙박스 로 사용 할 수 없습니다.
한편,Angular 는 성명 식 템 플 릿 문법 을 핵심 으로 API 개발 인 터 페 이 스 를 제공 하 는 개발 자가 작성 한 템 플 릿 으로 프레임 워 크 가 상당히 복잡 한 컴 파일 처 리 를 거 쳐 최종 보기 대상 을 보 여 주 었 기 때문이다.템 플 릿 에서 보기 대상 까지 이 과정 에서 무슨 일이 일 어 났 는 지 알 아 보지 않 는 다 면,나 는 당신 이 시종 통 제 력 을 잃 는 느낌 이 들 것 이 라 고 믿 습 니 다.
다른 한편,Angular 는 하나의 프레임 워 크 로 응용 프로그램의 프레임 워 크 를 구축 하고 개발 자 들 이 채 울 수 있 는 공간 을 남 겼 기 때문이다.프레임 워 크 의 운영 체 제 를 최대한 이해 하지 않 으 면 프레임 워 크 를 충분히 이용 하기 어렵다.
Angular 를 개발 하 는 출발점 은 HTML 로 사용자 인터페이스 를 만 드 는 것 입 니 다.정적 웹 페이지 가 얼마나 쉽게 개발 되 는 지 생각해 보 세 요.이것 이 얼마나 좋 은 생각 인지 알 수 있 습 니 다.

html challenge
원생 HTML 의 문 제 는 우선 자 바스 크 립 트 를 빌려 야만 지나 갈 수 있 는 사용자 상호작용 을 실현 할 수 있다 는 것 이다.그 다음 에 그렇게 많은 라벨 만 사용 할 수 있 고 사용자 인 터 페 이 스 를 개발 하 는 대임 을 맡 기 어렵다.
브 라 우 저가와 같은 라벨 을 직접 설명 할 수 없 기 때문에 Angular 팀 은 컴 파일 러 의 개념 을 도입 했다.
브 라 우 저 에 보 내기 전에 확장 탭 이 있 는 HTML 을 브 라 우 저가 지원 하 는 네 이 티 브 HTML 로 번역 합 니 다.

html compiler
문장 끝 에 쓰 기:angular 를 공부 하 는 많은 친구 들 이 제 가 쓴 내용 을 보 았 을 거 라 고 믿 습 니 다.생각 하 는 것 이 많 든 적 든 도움 이 될 것 입 니 다.이 내용 이 여러분 에 게 더 많은 도움 이 되 었 으 면 좋 겠 고 많은 응원 부 탁 드 리 겠 습 니 다.