각도 건축

각도 아키텍처:

각도 개요

모듈

부품

서비스 및 의존 주입

각도 구조 개술

Angular 응용 프로그램은 일반적으로 여러 개의 모듈로 정의되지만, 항상 하나의 주 모듈이나 루트 모듈이 있습니다.응용 프로그램.모듈ts는 응용 프로그램이 시작되는 곳입니다.비뿌리 모듈의 다른 모듈을 기능 모듈이라고 부른다.
루트 모듈이 다른 모듈을 가져올 수 있다는 것을 잊지 마세요.

모듈

Angular 애플리케이션에는 NGM 모듈만 있는 것이 아닙니다.서비스, 구성 요소, html 템플릿 또는 html 파일, css 파일 등을 보유하게 됩니다.
힌트: 각도 응용 프로그램과 기능 모듈을 분리하는 것은 좋은 방법이다.기능 모듈은 이 기능과 관련된 코드, 예를 들어 구성 요소, 서비스, css 파일 등을 포함할 것이다.응용 프로그램을 기능 모듈로 나누는 것은 응용 프로그램을 더욱 조리 있게 할 뿐만 아니라, 로드 모듈을 지연시켜 응용 프로그램의 성능을 향상시키는 데도 도움이 된다😃.
각도:
- 선언: 이 모듈에 속하는 어셈블리, 명령 및 파이프.
이ngModule 아래에 이ngModule 기능과 관련된 내용을 추가한다는 뜻이다.예를 들어, 당신은 주인의 방에 난로를 넣지 않을 것이다. (아마도 당신은 웃을 것이다. 그러나 이것은 잘못된 것이다.)난로가 부엌에 있을 것이다.
- 내보내기: 다른 모듈의 구성 요소 템플릿에서 볼 수 있고 사용할 수 있는 성명 서브집합입니다.
다른 ngModule에 ngModule을 추가할 수 있다는 것을 기억하십시오.예를 들어 프로그램의 여러 부분에 사용되는 뿔 재료를 포함하는 모든 구성 요소가 있는 gModule가 있다면, 이 모듈은 다른ngModule에서 사용할 수 있는 gModule에 저장됩니다.
- 가져오기: 이 모듈에 설명된 구성 요소 템플릿은 내보내기 클래스의 다른 모듈이 필요합니다.
- 제공자: 본 모듈은 전 세계 서비스 집합에 기여한 서비스의 창조자;그것들은 응용 프로그램의 모든 부분에서 접근할 수 있다.(구성 요소 단계에서 공급자를 지정할 수도 있습니다. 이것은 보통 첫 번째 선택입니다.)
D.I (의존항 주입) 를 통해 구성 요소 단계에서 서비스를 추가할 수 있습니다.
- 부트: 다른 모든 응용 프로그램 뷰를 호스팅하는 루트 컴포넌트라는 기본 응용 프로그램 뷰루트 모듈만 안내 속성을 설정해야 합니다.

bootstrap: [AppComponent]

다음은 응용 프로그램을 어떻게 사용하는지 보여 주는 예이다.모듈ts(루트 모듈)는 다른 모듈의 사용과 유사할 수 있습니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { NgrxModule } from './shared/modules/ngrx.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgrxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

구성 요소

새 Angular 프로그램을 만들 때 기본적으로 구성 요소를 볼 수 있습니다: 프로그램.구성 요소html.이 구성 요소도 응용 프로그램에 추가됩니다.모듈기본값은 ts입니다.
구성 요소:
1) 어셈블리와 해당 뷰에 필요한 모든 컨텐트를 가져올 수 있습니다.
2) 비즈니스 논리를 유지할 수 있다.
3) 구성 요소와 뷰 간에 연결을 설정할 수 있습니다.
4) 값을 다른 어셈블리(모 어셈블리, 형제 어셈블리, 서브어셈블리 등)에 전달할 수 있습니다.

템플릿, 명령 및 데이터 바인딩

나는 angular의 템플릿이 초능력의 html이라는 것을 보았다.템플릿은 html을 이해할 뿐만 아니라 구성 요소의 지령과 데이터 등 각도 표시도 이해한다.
각도 문서에서는 각도 태그가 있는 템플릿의 작은 예입니다.

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

참고: *ngIf 및 *ngFor는 명령입니다.여기서 *ngFor는 각도 템플릿에서 순환하는 방식으로, *ngIf는 html 요소를 조건부로 표시하거나 숨기는 데 사용됩니다.
Angular에서 데이터를 바인딩하는 방법은 다음과 같습니다.
- 이벤트 바인딩:

<button (click)="gotoDetail()">View Details</button>

- 단방향 바인딩:

<h2 [innerText]="doctor.name"></h2>

- 양방향 바인딩:

<input [(ngModel)]="doctor.name"/>

- 보간:

<h2>{{doctor.name}}</h2>

데이터 바인딩에 대한 자세한 내용: https://blog.eduonix.com/web-programming-tutorials/learn-different-types-data-bindings-angular-2/
데이터 귀속으로 인해 우리는 템플릿과 구성 요소를 서로 통신할 수 있다. 뿐만 아니라 데이터 귀속으로 인해 우리는 서로 다른 구성 요소 간에 통신할 수 있다!나는 다른 절에서 구성 요소 통신을 더욱 상세하게 소개할 것이다.

템플릿을 사용할 때 파이프에 접근할 수 있습니다.파이프는 기본적으로 값 포맷 프로그램이다.파이핑은 원래 값에 영향을 주지 않고 데이터의 모양새를 변경합니다.사용자 정의 파이프를 직접 구성하거나 Angular 팀에서 생성한 기존 파이프를 사용할 수 있습니다.
https://angular.io/api?type=pipe
각도:

<!-- Default format: output 'Jun 15, 2015'-->
 <p>Today is {{today | date}}</p>

서비스 및 의존 주입

Angular 서비스는 특정 용도를 가진 클래스로 사용 상황에 따라 서비스를 만드는 것이 좋습니다.예를 들어, 만약 당신이 서비스를 만들고 싶다면, 당신의 직원 데이터에 대해 http 호출을 한다면, 당신은 자동차 데이터에 대한 http 호출을 하지 않을 것이다.구성 요소나 기능에 여러 서비스를 제공할 수 있습니다.서비스를 명확하게 정의함으로써 응용 프로그램이 어떻게 작동하는지 이해하고 세련되게 변하는 데 도움을 줄 것이다.
다음과 같은 두 가지 서비스가 있습니다.
- Feature 서비스: 사용 중인 기능에 대해 특정 작업을 수행하는 클래스입니다.
- 공유 서비스: 여러 기능에 걸쳐 다시 사용해야 하는 동작을 수행하는 클래스입니다.

D.I (의존 주입)

이것은 구성 요소 내부에서 우리의 서비스를 사용하는 방법의 일종이다.이렇게 하면 구성 요소가 서비스 클래스의 모든 기능에 접근할 수 있습니다.
각도:
응용 프로그램에 필요한 의존 항목은 공급자가 새로운 실례를 만들 수 있도록 프로그램의 주입기에 공급자를 등록해야 한다.서비스에 대해 제공자는 통상적으로 서비스 유형 자체이다.

D.I. 서비스 사용 수명주기

다음 명령을 실행할 때:

ng generate service my-service-name

Angular CLI 는 Injectable () decorator 를 사용하여 서비스 클래스를 생성합니다.이 장식기는 우리가 이 클래스를 사용할 수 있도록 할 것입니다. 이 경우 서비스는 D.I.를 통해 다른 클래스에서 사용할 것입니다.
각도:
- 제트기는 주요 기구입니다.Angular는 부트 중에 응용 프로그램 범위의 주입기를 만들고 필요에 따라 다른 주입기를 만듭니다.너는 주사기를 만들 필요가 없다.
- 주입기는 의존항을 만들고 의존항의 실례를 유지하는 용기를 만듭니다. 가능하면 주입기는 이 실례를 다시 사용합니다.
- 공급자는 주입기가 의존 관계를 가져오거나 만드는 방법을 알려주는 대상입니다.
Angular CLI 는 또한 서비스에 Provider 를 추가합니다.루트 수준에서 서비스를 만들면 새로 만든 서비스의 제공자는 다음과 같습니다.

@Injectable({
 providedIn: 'root',
})

예, 특정 모듈에 서비스를 추가하여 이 동작을 변경할 수 있습니다.이 동작을 실행하면 이 서비스는 이 서비스를 추가한ngModule 내의 구성 요소만 사용할 수 있습니다.

@NgModule({
  providers: [
  CarService
 ],
 ...
})

서비스 구성 요소에서 DI를 실행하는 방법은 다음과 같습니다.

//At the top of your file
import {CarService} from '../../path';
...// more code
constructor(private carService: CarService) { }

주의: 값, 함수 등 다른 것들을 D.I로 표시할 수 있습니다.
D에 대한 자세한 내용을 보려면: https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f