Angular JS

Angular Architecture Overview & Concepts

황기하 2022. 1. 14.

https://www.tektutorialshub.com/angular/angular-architecture-overview-concepts/

Angular 아키텍처 개요 및 개념

It is very important to know how the framework works before you start using it.

In this article let us look at some of the important Angular building blocks (Angular Architecture ) and concepts.

프레임워크를 사용하기 전에 프레임워크가 어떻게 작동하는지 아는 것이 매우 중요합니다.

이 기사에서는 몇 가지 중요한 Angular 빌딩 블록(Angular Architecture)과 개념을 살펴보겠습니다.

The first big change in Angular over AngularJs is Components.

The Components replace the Controllers of AngularJs.

But that is where the similarity ends.

Angular Components do not look like Controllers.

The Components are actually similar to the directives of AngularJs.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10, Angular 11, Angular 12

AngularJs에 대한 Angular의 첫 번째 큰 변화는 Components 입니다.

구성 요소는 AngularJ의 컨트롤러를 대체합니다.

그러나 그것은 유사성이 끝나는 곳입니다.

Angular 구성 요소 는 컨트롤러처럼 보이지 않습니다.

구성 요소는 실제로 AngularJ 의 지시문 과 유사합니다 .

Table of Contents

1. Angular Architecture

The Architecture of an Angular Application is based on the idea of Components.

An Angular application starts with a Top-level component called Root Component.

We then add child components forming a tree of loosely coupled components.

Angular 애플리케이션의 아키텍처는 Component의 개념을 기반으로 합니다.

Angular 응용 프로그램은 Root Component라는 최상위 구성 요소로 시작합니다.

그런 다음 느슨하게 결합된 구성 요소의 트리를 형성하는 자식 구성 요소를 추가합니다

2. A Typical Angular Application

Consider a Simple Task List Application shown above.

The Application shows a list of Tasks and at the bottom, you have the option to add a new task.

The above application a simple application,

but if you look at the Angular code, you will see that it comprises several parts.

You can see that in the image below.

You can see that is consists of three components,

Services that gets injected into the components and directives that help to manipulate the DOM

위에 표시된 단순 작업 목록 응용 프로그램을 참고하십시오.

응용 프로그램은 작업 목록을 표시하고 맨 아래에는 새 작업을 추가할 수 있는 옵션이 있습니다.

위의 응용 프로그램은 간단한 응용 프로그램이지만

Angular 코드를 보면 여러 부분으로 구성되어 있음을 알 수 있습니다.

아래 이미지에서 확인할 수 있습니다.

세 가지 Component와 component에 주입되는 Service와

DOM 조작에 도움이 되는 Directive로 구성되어 있음을 알 수 있습니다.

Our application has three Components.

At the top we have rootComponent.

Under the rootComponent, we have two other components.

One is TaskComponent, which displays the list of Tasks and

TaskAddComponent, which allows us to create new tasks.

The Angular Components are plain javaScript classes and defined using @component Decorator.

This Decorator provides the component with the View to display ( known as Template) & Metadata about the class

우리의 응용 프로그램에는 세 가지가 있습니다

맨 위에 rootComponent. 그 아래에 두 가지 다른Component가 있습니다.

작업 목록을 표시하는 TaskComponent, 새 작업을 만들 수있는 TaskAddComponent 입니다.

Angular Components 는 일반 자바스크립트 클래스이며 @component Decorator 를 사용하여 정의됩니다 .

이 데코레이터는 표시할 View(Template 이라고 함) 및 클래스에 대한 Metadata를 Component 에 제공합니다.

The Components uses data binding to get the data from the Component to our View (Template).
We use the special HTML markup knows as the Angular Template Syntax to achieve this.

구성 요소는 데이터 바인딩 을 사용하여 구성 요소에서 보기(템플릿)로 데이터를 가져옵니다.
이를 달성하기 위해 Angular 템플릿 구문 으로 알려진 특수 HTML 마크업을 사용합니다 .

At the right side, we have an Angular Services.

The Angular Services provides services to our Component,

like fetching data from database using Task Service,

logging application events using logger Services and

making an HTTP request to the back-end server using HTTP service.

The Responsibility to provide the instance of the Service to the Components falls on Angular Injector.
It injects services into the components using Dependency Injection

오른쪽에는 Angular Services 가 있습니다.
Angular Services는
태스크 서비스를 사용하여 데이터베이스에서 데이터 가져오기,
로거 서비스를 사용하여 애플리케이션 이벤트 로깅,
HTTP 서비스를 사용하여 백엔드 서버에 HTTP 요청 만들기와 같은 서비스를 구성 요소에 제공합니다.

구성 요소에 서비스 인스턴스를 제공하는 책임은 Angular Injector 에 있습니다.
종속성 주입 을 사용하여 구성 요소에 서비스를 주입합니다.

We also have Directives, which help us to manipulate

the structure (structural directives) or style (attribute directive) our application.

The directives help us to transform the DOM as per our needs.

우리는 또한
애플리케이션 의 구조( 구조적 지시어 ) 또는 스타일( 속성 지시어 ) 을 조작하는 데 도움이 되는
지시문 을 가지고 있습니다. 지시문은 필요에 따라 DOM을 변환하는 데 도움이 됩니다

3. Angular Modules

As seen from the above diagram
the Angular Application consists of several building blocks like Components, Services, Directives. We create more such blocks as the application grows.

The Angular provides a nice way to organize these building blocks

using the concept called Angular Modules.

We will create components, services, and directives and put them inside the Angular Modules.
We use the special directive to create the Modules.
The Angular Module also called as ngModule

위의 다이어그램에서 볼 수 있듯이
Angular Application은 Components, Services, Directives 와 같은 여러 빌딩 블록으로 구성됩니다 .
애플리케이션이 성장함에 따라 이러한 블록을 더 많이 생성합니다.
Angular는 Angular Modules 라는 개념을 사용하여
이러한 빌딩 블록을 구성하는 좋은 방법을 제공합니다 .

우리는 components, services, directives 만들고 그리고 그것들을 Angular Modules 안에 넣을 것 입니다.
우리는 모듈을 생성하기 위해 특별한 지시문을 사용합니다.
ngModule 이라고도 하는 Angular 모듈 입니다.

Use Angular Module ( or ngModule) to organize of the Angular code within a bigger Angular Application.

The Application is made up of several Angular Modules acting together.

Each Module implementing a specific feature or functionality of the application.

Angular 모듈(또는 ngModule)을 사용하여

더 큰 Angular 애플리케이션 내에서 Angular 코드를 구성합니다.

응용 프로그램은 함께 작동하는 여러 Angular 모듈로 구성됩니다.

애플리케이션의 특정 기능을 구현하는 각 모듈.

Javascript Modules (ES2015)

Do not confuse Angular Modules with JavaScript Modules.

The Angular Modules are specific to Angular.

The JavaScript Modules are part of the JavaScript language specification.

The ES2015 specifications set the standard for defining modules.

Angular 모듈 을 JavaScript 모듈과 혼동하지 마십시오 .

Angular 모듈은 Angular에만 해당됩니다.

JavaScript 모듈은 JavaScript 언어 사양의 일부입니다.

ES2015 사양은 모듈 정의 표준을 설정합니다.

In JavaScript as per the ES2015 specification, each file is a module. 
There is one module per file and one file per module.

ES2015 사양에 따른 JavaScript에서 각 파일은 모듈입니다. 
파일당 하나의 모듈과 모듈당 하나의 파일이 있습니다.

These Modules define the scope of the variables, functions, and classes defined inside the module.

These variables are always local to the module and are not visible outside the module

The modules without public methods or properties are useless.

The modules help us to create public members by using the Export statement.

The other modules can use these public members using the Import statement.

이러한 모듈은 모듈 내부에 정의된 변수, 함수 및 클래스의 범위를 정의합니다.

이러한 변수는 항상 모듈에 대해 로컬이며 모듈 외부에서 볼 수 없습니다.

공개 메서드나 속성이 없는 모듈은 쓸모가 없습니다.

모듈은 Export 문 을 사용하여 공개 멤버를 만드는 데 도움이 됩니다 .

다른 모듈은 Import 문 을 사용하여 이러한 공개 멤버를 사용할 수 있습니다 .

Angular uses the JavaScript modules via the Typescript.

Angular는 Typescript를 통해 JavaScript 모듈을 사용합니다.

We build Component, Services, directives using the JavaScript Module.
Each Component is a JavaScript Module.
Each Service is a JavaScript Module.
And then we combine them together using the Angular Module.

JavaScript 모듈을 사용하여 구성 요소, 서비스, 지시문을 빌드합니다.

각 구성 요소는 JavaScript 모듈입니다.

각 서비스는 JavaScript 모듈입니다. 그런 다음 Angular Module 을 사용하여 함께 결합합니다 .

Anatomy of Angular JavaScript Module

In Angular Application,
we mainly build Components, Services & Directives.
Angular provides a very consistent way to define these building blocks.
These are defined inside a JavaScript Module and follows the pattern shown below

Angular 애플리케이션에서는 주로 구성 요소 , 서비스 및 지시문 을 빌드 합니다.
Angular는 이러한 빌딩 블록을 정의하는 매우 일관된 방법을 제공합니다.
이들은 JavaScript 모듈 내부에 정의되며 아래 표시된 패턴을 따릅니다.

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

@Component({

})

export class AppComponent

{

SomeObject : any;

Title : string ="Hello Angular";

getSomeObject(): any {

return this.SomeObject;

}

The above example has three Parts, An import statement at the beginning.

A class (AppComponent) at the bottom, which we define with an export statement.
We decorate the class with a decorator @Component immediately above the class.

Import Statement

The import statement tells Angular
where to find the external functions that we are using in our module.
All the external dependencies
like third party libraries, our own modules or modules from Angular
must be imported.

An Import statement is part of the ES2015 specifications.
It is similar to the Import statement of Java or Using statement of C#

You can import only the exported members from the other modules.

import 문은 Angular에 모듈에서 사용 중인 외부 함수를 찾을 위치를 알려줍니다.
타사 라이브러리, 자체 모듈 또는 Angular의 모듈과 같은 모든 외부 종속성을 가져와야 합니다.
Import 문은 ES2015 사양의 일부입니다.

Java의 Import 문이나 C#의 Using 문과 유사합니다.

다른 모듈에서 내보낸 멤버만 가져올 수 있습니다.

The class

The Class contains the logic of the application.
It can contain methods & properties just like c# or java classes.
The class must be defined with the export keyword
if you want to use the class in another module.

클래스에는 애플리케이션의 논리가 포함됩니다.
C# 또는 Java 클래스와 같은 메서드 및 속성을 포함할 수 있습니다.
다른 모듈에서 클래스를 사용하려면 export 키워드로 클래스를 정의해야 합니다.

The class Decorator

AppComponent is just a class.
There is nothing Angular about it.
It is the decorator, which tells angular how to treat the class.

For Example,
@Component decorator tells the Angular that the Class is a Component. Similarly,
@Directive tells the Angular that the class is a Directive.
Angular currently has following class decorators

AppComponent는 클래스일 뿐입니다. 그것에 대해 Angular는 없습니다.
angular에게 클래스를 처리하는 방법을 알려주는 것은 데코레이터입니다.

예를 들어

@Component데코레이터는 Angular에 클래스가 구성 요소임을 알려줍니다. 마찬가지로,

@DirectiveAngular는 클래스가 지시문임을 알립니다.

Angular에는 현재 다음과 같은 클래스 데코레이터가 있습니다.

@Component
@Directive
@Injectable
@NgModule
@Pipe

4. Building Blocks of Angular Application

Looking at task application in the previous section,

you can identify the seven main building blocks of an Angular Application.

이전 섹션의 작업 애플리케이션을 살펴보면

Angular 애플리케이션의 7가지 주요 빌딩 블록을 식별할 수 있습니다.

Component
Templates
Metadata
Data Binding
Directives
Services
Dependency Injection

Component

The Angular Component is a class, which we decorate by @Component class decorator

The Component controls the part of our user interface (or view).
The Task List application listed above has three components.

The TaskComponent displays the list of Tasks
The TaskAddComponent helps us to create new tasks.
The rootComponent is the Parent component of these components
and it only displays the name of the application.

Angular Component 는
@Component클래스 데코레이터 로 장식하는 클래스입니다.

component는 사용자 인터페이스(또는 보기)의 일부를 제어합니다.
위에 나열된 작업 목록 응용 프로그램에는 세 가지 component가 있습니다.

TaskComponent는 작업 목록을 표시하며

TaskAddComponent 새 작업을 만드는 데 도움 이 됩니다.

rootComponent는 이러한 구성 요소의 상위 구성 요소이며 응용 프로그램의 이름만 표시합니다.

The component, that we had created in the Create Your First Angular Application as shown below

아래는 Create Your First Angular Application에서 생성한 컴포넌트입니다.

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'GettingStarted';

}

The Component has four important parts
구성 요소에는 네 가지 중요한 부분이 있습니다.

Import Statement
Class
Template
Metadata

The Import statement imports the dependencies required by this component.
The class contains the application logic. It is decorated by the @Component class decorator.

Import 문은 이 구성 요소에 필요한 종속성을 가져옵니다.
클래스에는 응용 프로그램 논리가 포함되어 있습니다.
@Component 클래스 데코레이터 에 의해 장식됩니다.

Template

The Component needs a View to display. The Template defines that View.

The Template is just a subset of HTML, that tells Angular how to display the view.

It is a normal HTML page using tags like h1, h2, etc.

It also uses the Angular-specific markup like {} (for interpolation), [] (for Property binding) etc.

Component에는 표시할 View 필요합니다. Template은 해당 View를 정의합니다.

템플릿은 Angular에 view를 표시하는 방법을 알려주는 HTML의 하위 집합일 뿐입니다.

h1, h2 등과 같은 태그를 사용하는 일반 HTML 페이지입니다.

또한 {}(보간용), [](속성 바인딩용) 등과 같은 Angular 고유의 마크업을 사용합니다.

Metadata

Metadata tells angular how to Process the class.

We attach the Metadata to a class using a class decorator.

When we attach @Component class decorator to the class, then it becomes Component class.

The class decorator uses the configuration object,
which provides the Angular information it needs to create the component.
For Example, @Component directives come with configuration options
like selector, templateURL (or template), directives, etc

Metadata는 Angular에게 클래스를 처리하는 방법을 알려줍니다.

class decorator를 사용하여 Metadata를 클래스에 첨부합니다.
@Component 클래스 데코레이터를 클래스에 붙이면 Component 클래스가 됩니다.

클래스 데코레이터는 구성 객체를 생성하는 데 필요한
Angular 정보를 제공하는 구성 객체configuration object를 사용합니다.

예를 들어 @Component지시문에는
selector, templateURL(또는 템플릿), directives등과 같은 구성 옵션이 있습니다.

Data Binding

Angular uses the Data Binding to get the data from the Component to our View (Template).
This is done using the special HTML Angular-specific markup
known as the Template Syntax

The Angular supports four types of Data binding

Angular는 데이터 바인딩 을 사용하여 구성 요소에서 뷰(템플릿)로 데이터를 가져옵니다.
이것은 템플릿 구문으로 알려진 특별한 HTML Angular 특정 마크업을 사용하여 수행됩니다.

Angular는 네 가지 유형의 데이터 바인딩을 지원합니다

Interpolation 보간
Data is bind from component to View
데이터는 구성 요소에서 보기로 바인딩됩니다
Property Binding
Data is bind from component to the property of an HTML control in the view like
데이터는 구성 요소에서 다음과 같은 뷰의 HTML 컨트롤 속성에 바인딩됩니다.
Event Binding
The DOM Events are bind from View to a method in the Component
DOM 이벤트는 View에서 Component의 메서드로 바인딩됩니다.
Two-way Binding/Model Binding 양방향 바인딩 /모델 바인딩
The data flow in both directions from view to component or from component to view
보기에서 구성 요소로 또는 구성 요소에서 보기로 양방향으로 데이터 흐름

Directive

The Directives help us to manipulate the view.

A directive is a class, which we create using the @Directive class decorator.
It contains the metadata and logic to manipulate the DOM

The Views are created by the Angular by using the Templates defined in the Components.

These templates are dynamic and are transformed as per the Directives.

Directives 은 view를 조작하는 데 도움이 됩니다 .

@Directive지시문은 클래스 데코레이터를 사용하여 생성하는 클래스입니다.
DOM을 조작하기 위한 메타데이터와 로직이 포함되어 있습니다.

뷰는 구성 요소에 정의된 템플릿을 사용하여 Angular에 의해 생성됩니다.

이러한 템플릿은 동적이며 지침에 따라 변환됩니다.

Angular supports two types of directives.
One is structural directives which change the structure of the View and
the other one is attribute directive, which alters the style of our view.

Angular는 두 가지 유형의 지시문을 지원합니다.
하나는 뷰의 구조를 변경하는 구조적 지시자 이고
다른 하나는 뷰의 스타일을 변경하는 속성 지시자 입니다.

Services

The Services provide service to the Components or to the other Services.

Angular does not have any specific definition for Services.
You just create a class, export a method, that does some specific task and it becomes a service.
You do not have to do anything else.

서비스 는 구성요소 또는 다른 서비스에 서비스를 제공합니다.

Angular에는 서비스에 대한 특정 정의가 없습니다.
특정 작업을 수행하는 클래스를 만들고 메서드를 내보내면 서비스가 됩니다.
다른 작업을 수행할 필요가 없습니다.

For Example.

export class MyLogger {

AddTolog(msg: any)

{

console.log(msg);

}

And in any of our controllers, we can just invoke it using
그리고 모든 컨트롤러에서 다음을 사용하여 호출할 수 있습니다.

log :MyLogger = new MyLogger();

constructor() {

this.log.AddTolog("Component Created");

}

These are plain Javascript Modules.
There is nothing Angular about these Services.

What Angular does is to make these services are available to the components
using what is known as dependency injection.

이들은 일반 Javascript 모듈입니다. 이러한 서비스에는 Angular가 없습니다.

Angular가 하는 일은 종속성 주입이라고 하는 것을 사용하여
구성 요소에서 이러한 서비스를 사용할 수 있도록 하는 것입니다.

Dependency Injection

Dependency injection is a method by which,
a new instance of a service is injected into the component, which requires it.

The dependencies injection is mostly used to inject services into components or to other services.

The Angular does this using the injector.
When a component is created, Angular looks at the Component Metadata for the Services,
on which the Component is required.
The injector then creates the instance of the Service and injects it into the component using its constructor.

If the service is already created, then the injector does not create the service but uses it. The Service needs to tell the Angular that it can be injected into any components, which requires it. This is done by using the @Injectable call decorator

종속성 주입 은 서비스의 새 인스턴스를 필요한 구성 요소에 주입하는 방법입니다.

종속성 주입은 주로 구성 요소 또는 다른 서비스에 서비스를 주입하는 데 사용됩니다.

Angular는 인젝터 를 사용하여 이 작업을 수행합니다 .
구성 요소가 생성되면 Angular는 구성 요소가 필요한 서비스에 대한 구성 요소 메타데이터를 확인합니다.
그런 다음 인젝터는 서비스의 인스턴스를 만들고 생성자를 사용하여 구성 요소에 주입합니다.

서비스가 이미 생성된 경우 서비스를 생성 injector하지 않고 사용합니다.
서비스는 Angular에 필요한 모든 구성 요소에 주입할 수 있음을 알려야 합니다.
이것은 @Injectable호출 데코레이터 를 사용하여 수행됩니다.

@Injectable()