03-01 아키텍처 개요

아키텍처 개요

Angular는 HTML과 JavaScript 또는 JavaScript로 컴파일되는 TypeScript와 같은 언어로 클라이언트 응용 프로그램을 작성하기 위한 프레임워크입니다.

프레임 워크는 몇개의 라이브러리로 구성되며, 일부 라이브러리는 코어라이브러리이고 일부 라이브러리는 선택적 라이브러리입니다.

Angular용 마크업을 사용하여 HTML 템플릿을 구성하고, 이러한 템플릿을 관리하기 위한 컴포넌트 클래스를 작성하며, 서비스의 응용 프로그램 로직을 추가하며, 컴포넌트와 서비스를 모듈로 묶음으로써 Angular 응용 프로그램을 작성합니다.

그런 다음 루트모듈을 부트스트랩하여 앱을 실행합니다. Angular는 브라우저에서 애플리케이션 콘텐츠를 제공하고 당신이 제공하는 명령에 따라 사용자 상호작용에 응답합니다.

물론, 이것보다 더 많은 것이 있습니다. 다음 페이지에서 자세히 설명합니다. 지금은 큰 그림에 집중하십시오.

 

모듈

Angular 응용 프로그램은 모듈 식이며 Angular는 NgModules이라는 자체 모듈시스템을 사용합니다.

NgModule은 많은 것을 포함합니다. 이 페이지에서는 모듈을 소개합니다. NgModules 페이지에서 자세히 다룹니다.

모든 Angular 앱에는 적어도 하나의 NgModule 클래스가 있으며 루트모듈인 AppModule이 있습니다.

루트모듈은 소규모 응용프로그램의 유일한 모듈일 수 있지만 대부분의 응용프로그램에는 어플리케이션 도메인, 워크플로 또는 밀접한 관련 기능세트 전용 코드와 같이 더 많은 기능모듈이 있습니다.

NgModule은 루트인지 기능인지에 관계없이 @NgModule 데코레이터가 있는 클래스입니다.

NgModule은 모듈을 설명하는 프로퍼티를 가진 단일 메타데이터 객체를 취하는 데코레이터 함수입니다. 가장 중요한 속성은 다음과 같습니다.

l  declaration - 이 모듈에 속한 뷰 클래스. Angular에는 세 가지 뷰 클래스가 있습니다. 컴포넌트, 디렉티브 및 파이프입니다.

l  exports - 다른 모듈의 컴포넌트 템플릿에서 볼 수 있고, 사용할 수 있어야 하는 선언의 하위 집합입니다.

l  imports - 이 모듈에서 사용하기 위하여, 선언된 컴포넌트 템플릿이 익스포트된 클래스가 있는 다른 모듈.

l  prooviders - 이 모듈이 전역 서비스 수집에 기여하는 서비스 제작자; 앱의 모든 부분에서 액세스 할 수 있게 됩니다.

l  bootstrap - 루트컴포넌트라고 하는 메인 응용프로그램 뷰로 모든 다른 앱 뷰를 호스팅하는 기본 응용프로그램 뷰입니다. 루트모듈만이 bootstrap 프로퍼티를 설정해야합니다.

다음은 간단한 루트모듈입니다.

src/app/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 { }

루트모듈을 부트스트랩하여 응용프로그램을 시작하십시오. 여러분은 개발하는 동안 AppModule을 이 main.ts 파일로 부트스트랩할 것입니다.

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module';   platformBrowserDynamic().bootstrapModule(AppModule);

 

NgModules 대 자바스크립트 모듈

NgModule(@ NgModule로 장식 된 클래스)은 Angular의 기본 기능입니다.

JavaScript는 JavaScript 객체 컬렉션을 관리하기 위한 자체 모듈시스템도 가지고 있습니다. NgModule 시스템과 완전히 다르며 관련이 없습니다.

JavaScript에서 각 파일은 모듈이며 파일에 정의된 모든 객체는 해당 모듈에 속합니다. 모듈은 일부 키워드를 export 키워드로 표시하여 일부 개체를 공개로 선언합니다. 다른 JavaScript 모듈은 import 문을 사용하여 다른 모듈의 공용객체를 액세스합니다.

import { NgModule }     from '@angular/core'; import { AppComponent } from './app.component';

 

export class AppModule { }

이들은 서로 다르며 보완적인 모듈시스템입니다. 둘 다 사용하여 앱을 작성하십시오.

 

Angular 라이브러리

Angular 모듈은 자바스크립트 모듈 컬렉션입니다. 라이브러리 모듈로 생각할 수 있습니다.

각 Angular 라이브러리 이름은 @angular 접두사로 시작합니다.

Npm 패키지관리자를 사용하여 이들을 설치하고 JavaScript import 문을 사용하여 그 일부를 가져옵니다.

예를 들어 Angular의 Component 데코레이터를 다음과 같이 @angular/core 라이브러리에서 가져옵니다.

import { Component } from '@angular/core';

또한 JavaScript import 문을 사용하여 Angular 라이브러리에서 NgModule을 가져옵니다.

import { BrowserModule } from '@angular/platform-browser';

위의 간단한 루트 모듈 예제에서 애플리케이션 모듈에는 해당 BrowserModule 내부의 자료가 필요합니다. 해당 자료를 액세스하려면 다음과 같이 @NgModule 메타데이터의 imports에 추가하십시오.

imports:      [ BrowserModule ],

이 방법으로 Angular와 JavaScript 모듈시스템을 함께 사용합니다.

두 시스템이 "imports"과 "exports"라는 공통된 어휘를 공유하기 때문에 두 시스템을 혼동하기 쉽습니다. 혼란은 시간이 지나고 경험이 쌓임에 따라 명확해집니다.