본고에서 우리는 깨끗하고 유지보수가 가능하며 확장이 가능한 체계 구조로 새로운angular 응용 프로그램을 구축하는 방법과 이렇게 하는 장점을 배울 것이며 가장 중용할 수 있는 서비스와 기능이 특정한 구성 요소도 논의할 것이다.
나의 영감은 Tomas Trajanangular architecture 블로그에서 왔다.나는 다른 예와 도구로 같은 개념을 해석했다.

From last year I am learning angular and have been developed more 9 to 10 applications. So with that understanding pitching in these concepts.

this article brings all lessons learned in a distilled cleanup form you to cut down your learning curve and help you guys create angular project epic.

프로젝트 시작

Angular CLI 필요 npm 다운로드

npm install -g @angular/cli

as of now(November 2020) the current angular version is 10.2.1and I would strongly recommend to create new apps using that version (or any latest versions) and start using goodies like IVY or --strict flag right from the beginning

IVY는 Angular의 렌더링 엔진으로 코드를 아주 작은 크기로 줄입니다.

strict flag을 사용하면 프로젝트를 초기화하는 데 아주 적은 새 설정을 사용할 수 있습니다. 이 설정들은 유지보수성을 향상시키고 오류를 미리 포착할 수 있으며 CLI가 응용 프로그램에 고급 최적화를 실행할 수 있도록 합니다.또한 이러한 더욱 엄격하게 설정된 프로그램을 사용하면 정적 분석을 더욱 쉽게 할 수 있으며, 이것은ng 업데이트 명령이 Angular의 미래 버전으로 업데이트될 때 더욱 안전하고 정확하게 코드를 재구성하는 데 도움을 줄 수 있다.

인코딩 애호가로서, 항상 시간축에서 다음 명령을 실행해서angular을 최신 버전으로 업데이트하려고 시도합니다.

npm i -g @angular/cli@latest

우선, Angular cli를 설치한 후, 우리는 새로운 Angular workspace를 생성해야 합니다. 이것은 실행할 수 있습니다

ng new angular-arch --create-application false --strict

아치는 프로젝트 이름

이다.

"응용 프로그램false를 만들면 빈 작업 영역

이 생성됩니다.

"strict는 일부 Typescript 컴파일러 로고의 값을 조정하여 우리가 올바른 일을 하도록 추진할 것이다

사용 가능한 다이어그램을 보려면 ng g 를 입력합니다.

신청하다.

사용 가능한 설명도 목록에 응용 프로그램이라는 프로그램이 포함되어 있습니다. 이 프로그램을 실행하면 작업 영역의 첫 번째 응용 프로그램을 만들 것입니다.

ng g application my-ang-arch --prefix my-ang --style scss --routing

내 angarch는 프로젝트 폴더에 생성됩니다.각도 라우터가 있고 Sass 스타일(.scss 파일 확장자 포함)

이 사용됩니다.

"접두사는 모든 구성 요소 표시와 명령 선택기의 이름에 사용됩니다. 따라서 모든 구성 요소에서 저의ang을 선택기로 얻을 것입니다.

스타일링에 있어서 심플하고 우아한 부품이 들어간 모서리 재료를 사용하겠습니다!
Angular Material를 추가하려면angular cli를 사용하여 다음 명령을 실행하십시오

ng add @angular/material

이것은 npm로lib를 설치합니다. 두 개의 초기 옵션에 대한 알림을 받을 것입니다

기본 테마를 선택하거나 사용자 정의를 하려면 [사용자 정의]를 옵션으로 선택하고 나중에 스타일에 자신의 테마를 사용하여 스타일을 설정합니다.유사 scssthis.

설치 레이아웃

완료되면 응용 프로그램에서 각도 재료 어셈블리를 가져올 수 있지만 나중에 더 많은 내용이 나타납니다.

공구.

**Prettier**: 대부분의 IDE와 통합된 자기 의견을 고집하는 코드 포맷 프로그램우리는 심지어 전체 프로젝트의 도움말 아래 간단한 npm 스크립트를 포맷할 수 있습니다!

사용하래요.

npm i -D prettier

일단 설치하면 우리는 만들 수 있다.prettierrc 파일, 지정한 포맷 옵션 here. 을 사용자 정의로 설정할 수 있습니다. 예시 설정은 다음과 같습니다.

{
"singleQuote" : true
}

AngularCLI의 경우 AngularCLI에서 제공하는 tslint을 사용하여 더 멋진 게임을 할 수 있습니다.
이를 위해 tslint config prettier를 설치하고 tslint의 extends 그룹 필드의 마지막 항목에 추가할 수 있습니다.json 파일.

{
"extends" : ["tslint:recommended", "tslint-config-prettier"]
}

가방에 npm 스크립트를 추가할 수 있습니다.json은 서명하기 전에 명령 포맷 코드를 실행하기 위해서입니다
패키지의 스크립트 부분에 이 명령을 추가합니다.json

"format:write" : "prettier \"projects/**/*.{ts,html,md,scss,json}\" --write"

webpack-bundle-analyzer:prod 구축 기간에 생성된 패키지 크기의 내용을 이해하는 데 도움을 주고 프로그램의 정확한 구조와 구조를 디버깅하는 데 도움이 됩니다.

명령을 실행하여 webpack bundle analyzer 설치

npm i -D webpack-bundle-analyzer

설치 후 패키지에 다음 스크립트를 추가합니다.스크립트 부분의 json

"analyze" : "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/<app-name>/stats.json"

스크립트에서 다음 작업을 수행합니다.

Dell이 사용하고 있는 유로화 제품 플래그

를 사용하여 생산을 위한 어플리케이션 구축

구축에 따라 모든 모듈의 통계 정보를 수집합니다. 왜냐하면 우리는 - EuroStats json 로고

를 사용하기 때문입니다.

마지막 단계는 웹 패키지 bundle analyzer를 호출하고 통계 정보를 지정합니다.json 파일.

& & & 조작자는 윈도우즈에서 일할 수 없습니다. 스크립트에서 두 개의 명령만 분할하면 됩니다.

"analyze" : "ng build --prod --stats-json"
"analyze:webpack": "webpack-bundle-analyzer ./dist/<app-name>/stats.json"

이 두 npm 명령을 실행하면 모듈마다 덮어쓰는 표면량을 표시하는 새 페이지를 열 것입니다.

Compodoc :angular 응용 프로그램의 정적 문서 도구로 모든 구성 요소, 서비스와 파이프 등을 분석하여 초 단위로angular 문서를 생성

명령을 사용하여 Compodoc 전역 설치

npm install -g @compodoc/compodoc

패키지에서 스크립트 작업을 정의합니다.json

"compodoc": "npx compodoc -p tsconfig.json src"

그리고 그것을 실행합니다

npm run compodoc

응용 프로그램 시작

명령을 사용하여 응용 프로그램 실행

npm start

또는

ng serve -o

만일 모든 것이 순조롭다면, 응용 프로그램은 반드시 http://localhost:4200에서 실행되어야 한다
쿨, 우리의 초기 설정이 완성되었다.우리는 빈 Angular 응용 프로그램이 있는 작업 구역이 있는데, 우리는 우리의 개발 체험을 개선하기 위해 멋진 도구를 추가했다.
건축하다
코드를 생성하고 작성하기 전에, 우리 먼저 전체 국면을 정관합시다

우리가 실현한 기능에 따라 이런 방식으로 코드를 조직합시다.
우리 위에는 두 개의 부분이 있다.
처음부터 불러올 갈망 부분 (main.js 패키지).이것은 최고급 루트가 있는 AppModule와 기본 레이아웃(예를 들어 네비게이션 표시줄/메인 레이아웃)이 있는 CoreModule, 그리고 전체 응용 프로그램에서 사용할 모든 핵심 단일 예시 서비스를 포함할 것이다.
로드 지연 부분은 사용자가 이러한 기능을 탐색한 결과로 로드됩니다.불활성 모듈은 공유 모듈도 가져옵니다.공유 모듈은 재사용 가능한 구성 요소, 지령과 모든 타성 모듈의 파이프로 구성되어 있기 때문에 그의 묶음 규모가 더욱 작고 개발자의 체험도 더욱 합리적이다!

Great our architecture structure is finished ,now we can organize our code and start adding features based on functionality

요약

우리는 아주 짧은 시간 안에 확장 가능한 구조를 가진angular 응용 프로그램을 만들었습니다.

응용 프로그램을 만들 때 우리는strict 로고를 추가하여 엄격한 빈 검사, 엄격한 함수 유형, 모든 유형을 제한하고 엄격한 속성 초기화를 유지한다

코드 포맷(prettier), 패키지 크기 검사(webpack bundle analyzer)와 문서(Compodoc)

angular architecture 모듈을 보았습니다. 어디서 무엇을 만들어야 하는지

핵심 모듈: 전체 프로젝트의 기초가 될 것이다. 기초 구조나 네비게이션 표시줄과 핵심 단일 서비스

를 포함한다.

공유 모듈: 재사용 가능한 구성 요소, 파이프와 타성 기능에 사용할 지령으로 구성되어 있다.

타성 모듈: 타성 모듈은 특성

에 특정한 특성을 실현하는 업무 논리(서비스)와 보기(부품)
시청자 확대에 도움이 되기 때문에 박수와 공유로 이 글과 개발자를 지지해 주십시오.매체와 다른 블로그에서 나를 주목하고 과학 기술 분야의 최신 정보를 이해하다.
In-Depth Angular - Medium
CodeWithAbi
기술적인 거 말고 인스타그램에 팔로우 해주세요.
다음 문장까지 안녕!!!