각구조준비서
나의 영감은 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.
프로젝트 시작
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
npm i -g @angular/cli@latest
우선, Angular cli를 설치한 후, 우리는 새로운 Angular workspace를 생성해야 합니다. 이것은 실행할 수 있습니다ng new angular-arch --create-application false --strict
사용 가능한 다이어그램을 보려면 ng g 를 입력합니다.
신청하다.
사용 가능한 설명도 목록에 응용 프로그램이라는 프로그램이 포함되어 있습니다. 이 프로그램을 실행하면 작업 영역의 첫 번째 응용 프로그램을 만들 것입니다.
ng g application my-ang-arch --prefix my-ang --style scss --routing
Angular Material를 추가하려면angular cli를 사용하여 다음 명령을 실행하십시오
ng add @angular/material
이것은 npm로lib를 설치합니다. 두 개의 초기 옵션에 대한 알림을 받을 것입니다공구.
**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 구축 기간에 생성된 패키지 크기의 내용을 이해하는 데 도움을 주고 프로그램의 정확한 구조와 구조를 디버깅하는 데 도움이 됩니다.
npm i -D webpack-bundle-analyzer
설치 후 패키지에 다음 스크립트를 추가합니다.스크립트 부분의 json"analyze" : "ng build --prod --stats-json && webpack-bundle-analyzer ./dist/<app-name>/stats.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 응용 프로그램을 만들었습니다.
시청자 확대에 도움이 되기 때문에 박수와 공유로 이 글과 개발자를 지지해 주십시오.매체와 다른 블로그에서 나를 주목하고 과학 기술 분야의 최신 정보를 이해하다.
In-Depth Angular - Medium
CodeWithAbi
기술적인 거 말고 인스타그램에 팔로우 해주세요.
다음 문장까지 안녕!!!
Reference
이 문제에 관하여(각구조준비서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abilashs003/angular-architecture-ready-book-4j1e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)