Architecture - nkiateam/angular-tutorial GitHub Wiki

Angular 응용 프로그램의 기본 구성 요소

Angular는 HTML로 작성된 클라이언트 응용 프로그램과 JavaScript 또는 Dart 또는 TypeScript와 같은 JavaScript로 컴파일하는 언어 중 하나입니다.

프레임워크는 몇 개의 코어 라이브러리와 나머지 선택적 라이브러리로 구성되어 있습니다.

Angularized 마크 업을 사용하여 HTML 템플릿을 작성하고 이러한 템플릿을 관리하기 위한 구성 요소로 클래스 작성, 서비스의 응용 프로그램 논리 추가 및 모듈의 복싱 구성 요소 및 서비스 추가를 통해 각도 응용 프로그램을 작성할 수 있습니다.

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

물론, 이것보다 더 많은 것들이 있습니다. 다음 페이지에서 세부 정보를 배우게 됩니다. 지금은 큰 그림에 집중하십시오.

The architecture diagram identifies the eight main building blocks of an Angular application:

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Learn these building blocks, and you're on your way.

The code referenced on this page is available as a live example.

Modules

Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules.

Angular modules are a big deal. This page introduces modules; the Angular modules page covers them in depth.

Every Angular app has at least one module, the root module, conventionally named AppModule.

While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

An Angular module, whether a root or feature, is a class with an @NgModule decorator.

Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those classes mean and how they should work. Learn more about decorators on the web.

NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:

declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.

exports - the subset of declarations that should be visible and usable in the component templates of other modules.

imports - other modules whose exported classes are needed by component templates declared in this module.

providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.

bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Here's a simple root module:

app/app.module.ts
COPY CODE
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 { }

The export of AppComponent is just to show how to export; it isn't actually necessary in this example. A root module has no reason to export anything because other components don't need to import the root module.

Launch an application by bootstrapping its root module. During development you're likely to bootstrap the AppModule in a main.ts file like this one.

app/main.ts
COPY CODE
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

####Angular modules vs. JavaScript modules The Angular module — a class decorated with @NgModule — is a fundamental feature of Angular.

JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to the Angular module system.

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

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

export class AppModule { }

Learn more about the JavaScript module system on the web.

These are two different and complementary module systems. Use them both to write your apps.

####Angular libraries Angular ships as a collection of JavaScript modules. You can think of them as library modules.

Each Angular library name begins with the @angular prefix.

You install them with the npm package manager and import parts of them with JavaScript import statements.

For example, import Angular's Component decorator from the @angular/core library like this:

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

You also import Angular modules from Angular libraries using JavaScript import statements:

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

In the example of the simple root module above, the application module needs material from within that BrowserModule. To access that material, add it to the @NgModule metadata imports like this.

imports:      [ BrowserModule ],

In this way you're using both the Angular and JavaScript module systems together.

It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports". Hang in there. The confusion yields to clarity with time and experience.

Learn more from the Angular modules page.

Components

Templates

Metadata

Data binding

프레임워크 없이 데이터 바인딩을 하는 경우 데이터 값을 HTML 컨트롤로 푸시하고 사용자의 응답을 액션 및 값 업데이트로 변환해야 합니다. 그러한 push/pull 로직을 직접 작성하는 것은 낡은 방식이며 오류 발생의 여지가 있습니다.

이에 Angular2는 템플릿 HTML일부에 바인딩 마크업을 추가하여 양쪽을 연결하고 구성요소의 일부와 조율하는 메커니즘인 데이터 바인딩을 지원합니다. 다이어 그램에서 볼 수 있듯이 4가지 형태의 바인딩 구문이 있습니다. 각 양식은 DOM간의 양방향을 나타냅니다.

아래 예제 템플릿에는 3가지 형식이 있습니다.

app/hero-list.component.html (binding) <li>{{hero.name}}</li> <hero-detail [hero]="selectedHero""></hero-detail> <li (click)="selectHero(hero)"></li>

{{hero.name}} - <li> 태그 내에 hero.name의 속성 값을 표출합니다. [hero] - selectedHero 값을 부모인 HeroListComponent에서 자식인 HeroDetailComponent의 hero 속성으로 전달합니다. (click) - 사용자가 hero를 클릭하면 이벤트 바인딩의 구성요소의 seelectHero 메서드를 호출합니다.

양방향 데이터 바인딩은 ngModel 지시문을 사용하여 속성 및 이벤트 바인딩을 단일 표기법으로 결합하는 중요한 4번째 형식입니다. 다음은 HeroDetailComponet 템플릿의 예제입니다.

app/hero-detail.component.html (ngModel) <input [(ngModel)]="hero.name">

양방향 바인딩에서 데이터 속성 값은 속성 바인딩과 마찬가지로 구성요소의 입력상자로 이동합니다. 사용자의 변경사항은 구성요소로 다시 전달되어 이벤트 바인딩과 마찬가지로 등록 정보를 최신 값으로 재설정합니다.

Angular는 모든 자식 구성요소를 통해 응용프로그램 구성요소 트리의 루트에서 Event Cycle마다 한 번 씩 모든 데이터 바인딩을 처리합니다.

데이터 바인딩은 템플릿과 해당 구성요소간의 통신에서 중요한 역할을 합니다. 부모 / 자식간의 데이터 바인딩은 부모 구성요소와 하위 구성 요소간의 통신에도 중요합니다.

Directives

Angular는 템플릿을 렌더링 할 때 지시어에 따라 DOM을 변환하는 동적인 방식을 갖고 있습니다.

지시문은 Metadata를 갖고 있는 클래스입니다. Typescript에서 @Directive 데코레이터를 적용하여 Metadata를 클래스에 첨부합니다.

컴포넌트는 동적인 템플릿 구조를 갖고 있습니다. @Component 데코레이터는 실제로 템플릿 지향기능으로 확장된 @Deirective 데코레이터입니다.

Component는 동적인 방식이지만 아키텍처의 개요는 구성요소와 지시문을 구분합니다.

지시어는 2가지의 종류로 구조 지시자와 속성 지시자로 분류됩니다. Attribute처럼 엘리먼트 태그 안에 사용되기도 하고 때로는 이름으로 표시되기도 하지만 할당이나 바인딩의 대상으로 자주 등장하는 경향이 있습니다.

1. 구조 지시문

• DOM의 요소를 추가, 제거 및 교체하여 레이아웃 구조를 변경할 수 있습니다. 예제 템플릿은 2가지 기본 구조 지시문을 사용합니다.

app/hero-list.component.html (structural) <li *ngFor="let hero of heroes"></li> <hero-detail *ngIf="selectedHero"></hero-detail>

ngFor - heroes목록에서 hero당 하나의 >li<를 생성하도록 명령합니다. ngIf - 선택된 hero가 있는 경우 HeroDetail의 구성요소가 포함됩니다.

2. 속성 지시문

• 기존 요소의 모양 또는 동작을 변경합니다. 템플릿 내에서는 정규 HTML속성처럼 보이므로 자체가 이름이 됩니다. 양방향 데이터 바인딩을 구현하는 ngModel 지정문은 속성 지정문의 예제입니다. ngModel은 표시 값 속성을 설정하여 변경 이벤트에 응답하여 기존 요소(ex. <input">)의 행동을 변경합니다.

app/hero-detail.component.html (ngModel) <input [(ngModel)]="hero.name">

Angular에는 레이아웃 구조(ex: ngSwitch)를 변경하거나 DOM 요소 및 구성요소의 측면(ex: ngStyle, ngClass)을 수정하는 몇 가지 지시문이 추가로 있습니다.

물론 사용자 지정 지시어도 작성할 수 있습니다. HeroListComponent와 같은 구성요소는 사용자 지정 지시문의 한 종류입니다.

Services

Dependency injection