ng best practices
1.0.0
이 프로젝트는 각도 프로젝트를 기반으로 구체적인 예를 들어 프론트 엔드 개발 (웹/모바일)의 모범 사례를 안내하는 튜토리얼의 지원 예가됩니다.
튜토리얼이 가능한 한 빨리 오기 위해서는 여기에서 투표 할 수 있습니다.
이 프로젝트는 스타트 업 및보다 전통적인 산업 (금융 및 항공 우주)이 프론트 엔드 프로젝트 (웹 및 Mobule)를 정의하고 개발하는 데 도움을 준 경험의 결과입니다.
제품을 출시 할 때 가장 어려운 부분 중 하나는 모범 사례를 정의하고 개발 워크 플로우를 마련 할 수있는 최상의 도구를 찾는 것입니다.
그래서 저는이 프로젝트를 만들기로 결정했습니다. 박스에서 사용할 준비가 된 모범 사례의 집중이되기로 결정했으며,이를 통해 개발자와 기술적으로 기술적 인 아키텍처 며칠, 심지어 프로젝트에 가장 적합한 워크 플로우를 찾고 정의하기 위해 수개월의 노력을 절약 할 수 있습니다.
이 프로젝트/튜토리얼 주요 초점은 개발 모범 사례입니다. 따라서 처음에는 지속적인 통합 또는 응용 프로그램 배포와 관련된 자료가 포함되지 않습니다.
통지 1 : 이 프로젝트에 제시된 많은 모범 사례는 앞에서 언급했듯이 프론트 엔드 개발 및 일반적인 개발 (프론트 엔드뿐만 아니라 개발)이므로 프로젝트에서 Angular를 사용하지 않더라도 흥미로운 아이디어를 얻을 수 있습니다.
통지 2 : 다른 프로젝트의 내용이 프로젝트의 진화에 대한 아이디어와 프로젝트에 특정 도구, 라이브러리 또는 패턴을 추가/포함하는 단계를 갖는 것을 볼 수 있습니다.
이 프로젝트는 각도 CLI 버전 7.3.1로 생성되었습니다.
이 프로젝트에서는 주로 원사를 사용합니다. 그러나 NPM을 사용하여 동일한 스크립트/명령을 실행할 수 있습니다.
예를 들어 yarn 사용하여 프로젝트를 시작하려면 yarn start 실행합니다. npm 사용하여 동일한 작업을 수행하려면 npm run start 실행할 수 있습니다.
이 프로젝트를 시작하려면 설치해야합니다.
npm 대신 다른 스크립트를 실행합니다. (선택 과목)프로젝트를 시작하기 전에 다양한 종속성/라이브러리를 설치해야합니다. 그렇게하려면 :
# if npm
npm install
# if yarn
yarn
다음은 프로젝트 개발에 일반적으로 필요한 선택적 도구 목록입니다.
최신 작업 및 테스트 코드를 찾을 수있는 주요 지점은 마스터입니다.
개발 지점에서 일상적인 커밋과 개발을 따라갈 수 있습니다.
태깅 시스템은 프로젝트의 다른 업그레이드와 릴리스를 따라 나옵니다.
Dev 서버의 yarn start 실행하십시오. http://localhost:4200/ 로 이동하십시오. 소스 파일을 변경하면 앱이 자동으로 다시로드됩니다.
ng generate component component-name 새로운 구성 요소를 생성합니다. ng generate directive|pipe|service|class|guard|interface|enum|module 사용할 수도 있습니다.
yarn build 실행하여 프로젝트를 구축하십시오. 빌드 아티팩트는 dist/ Directory에 저장됩니다. 생산 빌드에 --prod 플래그를 사용하십시오.
실제로 기본 각도 CLI 생성 프로젝트는 단위 테스트에 업장 도구를 사용합니다. 카르마의 문제 (경우에 따라 유리할 수 있음)의 문제는 많은 경우에 필요하지 않은 테스트를 실행하기 위해 브라우저를 시작해야한다는 것입니다. 동시에 테스트 실행 시간을 연장합니다. 또한 브라우저를 가질 수있는 환경에서 실행되는 개발/배송 프로세스에 지속적인 통합이 통합 될 수 있습니다.
Karma 에 대한 흥미로운 대안이 있습니다. 더 빠르고 쉽게 작성하는 것이 더 쉽습니다. 브라우저가 필요하지 않습니다. 내장 조롱 및 어설 션 능력이 제공됩니다. 또한 Jest는 테스트를 동시에 병렬로 실행하여 더 부드럽고 빠른 테스트 실행을 제공합니다.
Jest-Preset-Angular : Jest 구성을보다 쉽게 만드는 데 사용됩니다. 실제 중고 버전은 6.0.2 이므로이 라이브러리의 미래 버전에 대해 문서와 구성이 다릅니다.
실행 yarn test:all 전체 프로젝트에서 농담을 통해 단위 테스트를 실행합니다.
connection Project Run yarn test:connection 과 같은 특정 프로젝트에서 단위 테스트를 실행하려면. 새 라이브러리에서 테스트를 시작할 수 있도록 Addiion의 package.json 파일에 필요한 스크립트를 Addiion에 추가하는 것을 잊지 마십시오. connection 라이브러리에서 어떻게 수행되는지에 대한 예를 들어 볼 수 있습니다.
또한 Exmaple yarn test:all:watch 를 위해 실행하여 테스트를 시작하고 변경 사항을 시청할 수도 있습니다.
vs Code and Jest Debug : VS Code를 사용하는 경우 .vscode 폴더 아래에서 launch.json 파일을 추가하여 Jest 기반 단위 테스트를 디버깅 할 수 있습니다 (실제 Repo에서 예제 파일을 찾을 수 있음). 디버거는 내장 노드 디버거를 사용합니다. 더 완전한 문서는 여기에서 좋아할 수 있습니다.
yarn e2e 실행하여 오기체를 통해 엔드 투 엔드 테스트를 실행하십시오.
connection 라이브러리에서 구성 요소를 가져 오려면 @connection 주석을 사용할 수 있습니다.
예 : import { ConnectionModule } from '@connection' .
tsconfig.json 파일에 paths 속성을 추가하여 가능합니다.
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
...
},
...
} 경로에 대해보다 구체적으로 얻으려면 (예 : 원형 종속성의 경우) tsconfig.json 파일에 다른 경로를 추가 할 수 있습니다.
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
"@connection/*" : [
" projects/connection/src/* "
]
...
},
...
}다음 예제와 같은 구성 요소 또는 기타 각도 내보내기 기능을 가져올 수 있습니다.
예 : import { ConnectionComponent } from '@connection/lib/modules/main/pages'; ;
개발자가 코드를 촉구하고 푸시하는 동안 정확한 워크 로우를 따르도록하려면 정점을 수행하고 스크립트를 수동으로 실행할 필요가 없으려면 다음 도구가 매우 유용합니다.
package.json 에서 당신은 다음을 추가합니다 :
" scripts " {
"commit" : " git-cz " ,
...
} 따라서 yarn commit 실행하면 cz-cli 사용됩니다. 따라서 더 이상 직접적인 git commit 없습니다.
cz-cli 플러그인을 완성합니다. package.json 에서 당신은 다음을 추가합니다 :
"config" : {
"commitizen" : {
"path" : " node_modules/cz-customizable "
},
"cz-customizable" : {
"config" : " path/to/custom/cz-config.js "
}
},
... configuration ( config.cz-customizable.config )에서 사용자 정의 파일을 제공하지 않으면 프로젝트의 루트에있는 .cz-config.js 파일이 사용됩니다.
참고 : VS 코드를 사용하여 기본 vim 대신 git 커밋 주석 또는 기타 파일 조작 작업을 편집 할 수 있으려면 Commande Line에서 사용할 수있는 음성에서 git config --global core.editor "code --wait" 실행할 수 있습니다 ( code --help 실행하여 확인할 수 있음).
자세한 내용은 여기에 있습니다.
package.json 파일의 루트에 husky 구성을 추가하십시오.
"husky" : {
"hooks" : {
"pre-commit" : " yarn lintstaged " ,
"prepush" : " yarn prod "
}
} Hools를 건너 뛰려면 git 명령에 --no-verify 플래그를 추가하십시오. 예 : git push --no-verify
이미 정의 된 husky Hooks 구성에 commit-msg 후크를 추가 할 수 있습니다.
"husky" : {
"hooks" : {
...,
"commit-msg" : " commitlint -E HUSKY_GIT_PARAMS "
}
} commit-msg 후크를 사용하면 커밋이 생성되기 전에 커밋 할 수 있습니다.
프로젝트의 루트에 commitlint.config.js 파일을 추가하여 줄팅 규칙/규칙을 정의 할 수 있습니다.
commitlint.config.js 예 :
module . exports = {
// we use the default @commitlint/config-conventional rules.
// you have to install @commitlint/config-conventional library to be able to use it.
extends : [ '@commitlint/config-conventional' ] ,
// Any rules defined here will override rules from @commitlint/config-conventional
// => custom rules
rules : {
'header-max-length' : [ 2 , 'always' , 100 ] ,
'subject-case' : [
2 ,
'never' ,
[ 'sentence-case' , 'start-case' , 'pascal-case' , 'upper-case' ]
] ,
...
}
} ; 참고 : 동일한 정보를 다시 입력 할 필요가 없도록 커밋을 다시 시도하려면 실행 yarn commit:retry 다시 실행하십시오.
Angular의 routermodule이 사용되었습니다. Angular의 문서는 매우 완전하며이를 살펴 보는 것이 좋습니다.
이 프로젝트에서는 app (독립형) 프로젝트를 위해 직접 라우팅/로드를 사용하도록 선택했습니다. 반면, 기본 앱 (루트 앱)의 경우 모듈이 게으른로드되어 라우팅이 작동하는 방식에 영향을 미칩니다.
LZAY로드가 어떻게 처리되는지 살펴 보려면 게으른로드 모듈이 정의되는 src/app/lazy 디렉토리를 살펴볼 수 있습니다. 그런 다음이 모듈은 src/app/app-routing.module.ts 파일에 "실제로"게으른로드됩니다. 각 게으른로드 모듈에 대해 경로가 정의됩니다. 이 경로는 원래 모듈에 정의 된 모든 경로를 사전에 전달해야합니다.
예상 : Orignal 모듈에서 URL localhost:4200/page-one 통해 page-one 컨텐츠에 액세스 할 때 (앱/독립형 프로젝트에서와 같이) 직접로드 할 때 페이지를 통해 페이지 1 컨텐츠에 액세스한다고 가정하십시오. 동시에, 동일한 모듈을 게으른 부하로 정의한 경로는 my-lazy-loaded-path 입니다. 따라서 동일한 컨텐츠/페이지에 액세스하려면 URL localhost:4200/my-lazy-loaded-path/page-one 사용해야합니다.
또한 게으른로드 또는 직접로드하는 동안 모듈이 작동하도록하기 위해로드 된 모듈 및 환경 변수에 대한 forRoot 방법의 조합이 사용됩니다.
조작 형태와 관련하여 각도에서는 반응 형태와 템플릿 구동 형태 중에서 선택할 수 있습니다.
공식 각도 문서에서 다음을 찾을 수 있습니다.
반응 형태는 더 강력합니다. 더 확장 가능하고 재사용 가능하며 테스트 가능합니다. 양식이 응용 프로그램의 핵심 부분이거나 이미 응용 프로그램을 구축하기 위해 반응성 패턴을 사용하고있는 경우 반응 형 양식을 사용하십시오.
템플릿 구동 양식은 이메일 목록 가입 양식과 같은 앱에 간단한 양식을 추가하는 데 유용합니다. 그들은 앱에 추가하기 쉽지만 반응 형태뿐만 아니라 스케일링하지 않습니다. 템플릿에서만 관리 할 수있는 매우 기본적인 양식 요구 사항과 논리가있는 경우 템플릿 구동 양식을 사용하십시오.
주요 차이점을 여기에서 찾을 수 있습니다.
이 프로젝트에서는 스트리 커터 데이터 모델을 갖거나 템플릿 (view/html)과 컨트롤러 (구성 요소 클래스/모델) 사이의 동기를 활용하는 것과 같이 모든 장점에 대해 반응 형식을 사용하기로 선택했습니다. 게다가, 일반적으로 큰 프로젝트에서는 복잡한 형태를 가질 수 있으며 reactive forms 작업을보다 쉽게 구축 할 수있게합니다.
프로젝트를 시작하면 이미 기존 스타일링 라이브러리를 기반으로 할 수 있습니다. 응용 프로그램 스타일을 할 때 시간을 절약 할 수 있습니다.
다음은 사용할 수있는 라이브러리의 몇 가지 예입니다.
실제로이 프로젝트의 경우 사용 된 bootstrap ( ng-boostrap 아님)입니다.
React, Angular 등과 같은 대부분의 라이브러리는 외부 라이브러리 나 도구없이 구성 요소가 내부적으로 상태를 관리 할 수있는 방법으로 제작되었습니다. 구성 요소가 거의없는 응용 프로그램에 적합하지만 응용 프로그램이 커질수록 구성 요소에서 공유 된 상태를 관리하는 것이 집안일이됩니다.
구성 요소간에 데이터가 공유되는 앱에서는 상태가 어디에 살아야하는지 실제로 아는 것이 혼란 스러울 수 있습니다. 이상적으로는 구성 요소의 데이터는 하나의 구성 요소에만 살아야합니다. 따라서 형제 구성 요소간에 데이터를 공유하는 것은 어려워집니다 (소스).
국가 관리 도서관의 작동 방식은 간단합니다. 응용 프로그램의 전체 상태를 보유하는 중앙 상점이 있습니다. 각 구성 요소는 한 구성 요소에서 다른 구성 요소로 소품을 보내지 않고도 저장된 상태에 액세스 할 수 있습니다.
예를 들어, 반응의 경우 가장 많이 사용되는 상태 관리 라이브러리 중 하나는 Redux입니다. React-Redux 패키지를 사용하면 더 쉬워집니다. 확실히, 당신은 Facebook의 플럭스와 같은 react 위한 다른 주 관리 라이브러리가 있습니다. 따라서 redux 가 react 중심으로하지 않고 다른 뷰 라이브러리와 함께 사용할 수 있기 때문에 해당 flux 더 많이 사용된다는 것을 가장 많이 선택하십시오.
angular 의 경우 다음과 같은 국가 관리를위한 많은 옵션이 있습니다.
Angular 의 경우 다른 옵션을 연구 한 후 ngxs 가 최선의 선택임을 알 수 있습니다. 처음에는 Angular 용으로 작성되었으므로 Angular의 코드 스타일에 따라 구현되며 Angular 가 제공하는 Dependency Injection 의 자점을 취합니다. 또한 다른 도서관보다는 장점이 적습니다. 이러한 이유로 우리는 내가 함께 일한 많은 회사에서 사용할 수 있도록 선택했습니다. ngxs 사용해야하는 이유에 대한 완전한 설명을 여기에서 찾을 수 있습니다 .
이 repo에 ngxs 플러그인을 사용했습니다.
Facade Pattern은 객체 지향 프로그래밍에 일반적으로 사용되는 소프트웨어 디자인 패턴입니다. 건축의 외관과 유사한 외관은 더 복잡한 기본 또는 구조적 코드를 마스킹하는 전면 인터페이스 역할을하는 객체입니다. 외관은 다음과 같습니다.
이것은 다소 사소한 변화 (및 여분의 계층)처럼 보이지만, 외관은 개발자 생산성에 큰 긍정적 인 영향을 미치며 뷰 레이어 (소스)에서 상당히 복잡성을 생산합니다.
다른 장점은 사용하기로 선택한 상태 관리 라이브러리와 독립적으로 컨트롤러 (예 : 각도 구성 요소)를 만드는 것입니다.
국제화의 경우 두 가지 옵션이 있습니다.
1- Angular의 i18N 시스템을 사용하십시오
2- NGX -Translate 라이브러리를 사용하십시오.
나는 세부 사항을 다루지 않을 것이지만,이 프로젝트의 선택과 프로젝트와 같은 다른 많은 프로덕션은 ngx-translate 사용하는 것이 었습니다. 주된 이유는 동일한 결과에 대해 사용 및 개발이 더 간단하고 Angular i18n 언어 당 응용 프로그램을 구축하고 언어 변경에 대한 응용 프로그램을 다시로드하기 때문입니다.
각도 CLI 사용 ng help 에 대한 도움을 받으려면 각도 CLI Readme를 확인하십시오.
대 코드를 사용하는 경우 다음 플러그인이 매우 유용 할 수 있습니다.
@haythem-ouederni의 저작권. 모든 프로젝트 소스는 Apache 라이센스 라이센스에 따라 릴리스됩니다.
