이 기사는 각도 CLI : 기능, 기능 및 기본 메커니즘을 탐구합니다. 경험이 풍부한 Angular CLI 사용자조차도 내면의 작업에 도움이되는 새로 고침을 발견 할 수 있습니다. 각도 개발에는 엄격하게 필수적이지 않지만 Angular CLI는 코드 품질과 개발자 효율성을 크게 향상시킵니다.
이것은 Angular에서 TODO 응용 프로그램을 구축하는 4 부 시리즈에서 첫 번째입니다.
Part 0 - 궁극적 인 각도 CLI 참조 안내서
1 부 - 초기 TODO 응용 프로그램 구축
2 부 - TODO 목록 및 개별 TODOS의 구성 요소 분리
Part 3 - Todo 서비스를 REST API 와 통합
파트 4 - 데이터 해상도를 위해 각도 라우터를 활용
주요 개념 : -
Angular CLI는 생성, 테스트 및 배포와 같은 작업을 자동화하여 각도 앱 개발을 간소화하는 강력한 도구 세트입니다.
새로운 각도 프로젝트를 생성하고 파일, 종속성 및 구성을 자동으로 설정합니다.
라이브 재 장전을 활성화하여 코드 변경의 실시간 미리보기를 제공합니다.
기존 프로젝트에 기능 (구성 요소, 서비스 등)을 추가합니다
JavaScript 및 CSS를 번들로 연결하여 생산 응용 프로그램을 준비합니다.
각도 CLI는 코드 생성을 넘어서고; 응용 프로그램 구조를 이해하여 코드베이스 품질 및 일관성을 보장합니다
-
간단한 역사
Angular Final은 2016 년 9 월 15 일에 출시되었습니다. Framework (Angularjs 1.x)에서 웹, 모바일 웹, 기본 모바일 및 데스크톱 개발을 지원하는 포괄적 인 플랫폼으로 발전하여 강력한 도구가 필요합니다. Angular Team은 설정 및 구성 복잡성을 최소화하기 위해 Angular CLI를 개발하여 개발자가 응용 프로그램 빌드에 집중할 수 있도록했습니다. 이 도구 세트에는 IDE/편집기 통합 및 각도 CLI 자체가 포함됩니다.
-
2017.04.25 업데이트 : 각도 CLI v1.0 변경 사항을 반영합니다. 기존 프로젝트를 업데이트하려면 Angular CLI v1.0 마이그레이션 안내서를 참조하십시오.
2017.02.17 업데이트 :
명령이 핵심 각도 CLI에서 제거되었습니다.
2017.01.27 업데이트 : 공식적으로 2 개의 릴리스에는 "Angularjs"및 "Angular"를 공식적으로 사용합니다.
-
angular cli는 무엇입니까?
Angular CLI는 개발 워크 플로우를 자동화하는 명령 줄 인터페이스입니다. 그 기능은 다음과 같습니다
새로운 각도 응용 분야 생성
실시간 미리보기를 위해 LiverEload로 개발 서버를 실행합니다
기존 애플리케이션에 기능 추가
단위 테스트 실행
엔드 투 엔드 (E2E) 테스트 실행
생산 배치를위한 구축
이러한 기능을 탐색하기 전에 설치를 표지하기 전에
전제 조건
typeScript 설치 (적극 권장)는 npm을 통해 수행됩니다
node.js 및 typeScript가 설치된 상태에서 각도 CLI를 설치하십시오.
angular cli 설치
NPM을 사용하여 전 세계적으로 설치 :
: 로 설치를 확인하십시오
-
이것은 설치된 버전 정보를 표시합니다 (예 : )
새로운 각도 응용 프로그램 생성
새로운 응용 프로그램을 생성하기위한 두 가지 방법이 있습니다 :
-
: 현재 디렉토리에서 응용 프로그램을 만듭니다
: 새 디렉토리를 생성 한 다음 내에서 실행됩니다.
는 디렉토리 생성에 선호됩니다. 예를 들면 :
이렇게하면 디렉토리를 생성하고 필요한 파일을 생성하고 종속성을 설치하고 TypeScript, Karma, Retractor 및 Environment Files를 구성합니다.
수많은 옵션을 커스터마이징 프로젝트 생성 (전체 목록은 $ node -v
$ npm -v
로그인 후 복사
로그인 후 복사
참조) : <🎜 🎜>
<<> : 파일을 작성하지 않고 생성을 시뮬레이션합니다
$ npm install -g typescript@2.2.0
로그인 후 복사
<<> : 상세한 출력을 제공합니다
<🎜 🎜> <<> : 패키지를 연결합니다
<🎜 🎜> <<> : Skips NPM 설치. <🎜 🎜>
<<> : git 리포지토리 초기화를 건너 뜁니다
<<> : 테스트 파일 생성을 건너 뜁니다. <🎜 🎜>
<<> : 초기 git 커밋을 건너 뜁니다
<🎜 🎜> <<> : 디렉토리 이름을 지정합니다
<🎜 🎜> <<> : 소스 디렉토리 이름을 지정합니다
<🎜 🎜> <<> : 스타일 언어 (CSS, Less, SCSS)를 지정합니다
<<> : 구성 요소 접두사를 지정합니다
<<> : PWA (Progressive Web App)를 생성합니다
<🎜 🎜> <<> : 라우팅 모듈을 추가합니다
<🎜 🎜> <<> : 인라인 스타일을 사용합니다
<🎜 🎜> <<> : 인라인 템플릿을 사용합니다
$ npm install -g @angular/cli
로그인 후 복사
이제 응용 프로그램을 실행합시다
<<<> 응용 프로그램 실행 <🎜
프로젝트 디렉토리 (<🎜 🎜>)로 이동하여 실행 : <🎜 🎜>$ node -v
$ npm -v
로그인 후 복사
로그인 후 복사
이것은 개발 서버 (기본 포트 4200)를 시작합니다. Livereload는 파일 변경에서 브라우저를 자동으로 새로 고칩니다. 서버를 중지하려면 를 누릅니다
기능 추가
명령은 특징을 추가합니다 :
ctrl-c
ng generate
-
ng generate class my-new-class
-
ng generate component my-new-component
-
ng generate directive my-new-directive
더 짧은 형태가 존재합니다 (예 : ). 각 하위 명령에는 특정 옵션이 있습니다 (Check ). CLI는 새로운 기능을 적절한 모듈에 지능적으로 통합합니다.
(나머지 응답은 각각 하위 명령, 단위 테스트, E2E 테스트, 생산 빌드, 배포 ( 제거), 응용 프로그램, 향후 기능, 요약 및 FAQS를 방출하는 각각을 자세히 설명합니다. , 원래 구조와 이미지 배치를 유지하면서 각 하위 명령과 나머지 텍스트에 대한 자세한 설명이 생략되었습니다.
-
ng generate enum my-new-enum
위 내용은 궁극적 인 각도 CLI 참조 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!