초보자를 위한 Angular CLI 단순화

따라서 첫 번째 Angular 응용 프로그램을 작성하고 싶지만 'Hello World' Angular 응용 프로그램을 설정하는 것도 쉽지 않습니다. 다음과 같은 여러 단계가 필요합니다.

• TypeScript를 사용하기로 선택한 경우 TypeScript 컴파일러 설정
• Configuration of Webpack or other module loader
• Setting up local web development server
• 종속성 설치 및 구성
• Configuring Unit Test environment
• 엔드 투 엔드 테스트 환경 구성
• 지속적 전달(Continuous Delivery) 작업
• 지속적 통합 작업 등.

이러한 모든 작업을 수동으로 수행할 수 있지만 이를 위해서는 이러한 모든 개념에 대한 충분한 이해가 필요하며 새 프로젝트를 시작하는 데 시간이 많이 걸립니다. 이 문제를 해결하기 위해 Angular는 Angular CLI(명령줄 인터페이스)와 함께 제공됩니다.

여기에서 자세히 알아보세요 https://cli.angular.io/

이러한 모든 작업은 Angular 앱을 생성, 테스트 및 배포하기 위한 명령줄 도구인 Angular CLI에서 처리합니다. 필요한 모든 종속성을 설치 및 구성하고 모든 것을 함께 연결하는 데 시간을 할애할 필요가 없으므로 Angular 앱을 만드는 데 Angular CLI를 사용하는 것이 좋습니다. 그것은 당신에게 많은 상용구를 제공하고 당신의 시간을 절약합니다.

Webpack을 사용하여 모든 패키징, 로딩 모듈, 가져 오기 기능, BrowserLink 등을 포함합니다. 전체 Webpack 구성은 CLI에 의해 완전히 수행되므로 걱정할 필요가 없습니다. 또한 단위 테스트를 위해 Jasmine 및 Karma를 구성하고 TypeScript 파일을 JavaScript 등으로 변환하기 위해 TypeScript 컴파일러를 구성합니다.  CLI Angular 어떻게 사용할 수 있는지 살펴보겠습니다.

Installation of Angular CLI 

npm을 사용하여 로컬 개발 머신에 Angular CLI를 전역적으로 설치할 수 있습니다.

npm으로 작업하려면 여기에서 NodeJS를 설치해야 합니다 : https://nodejs.org/en/. NodeJS가 설치되면 npm을 사용하여 CLI Angular 설치할 수 있습니다. NodeJS가 설치되어 있는지 확인하려면 다음 명령을 실행합니다.

node –v

NodeJS 버전 번호가 반환되는 것을 볼 수 있습니다.  NodeJS가 설치되면 npm이 설치되어 있는지 확인해야 합니다. nodeJS 설치 프로그램이있는 Windows에서는 npm도 설치됩니다. 그러나 명령을 사용하여 설치할 수도 있습니다.

npm install -g npm 

–v 별칭을 사용하여 설치된 npm 버전을 확인할 수 있습니다.

그런 다음 CLI를 설치하려면 다음을 수행하십시오 Angular.

 npm install @angular/cli -g

이제 Angular CLI를 전역적으로 설치했습니다.  CLI Angular 설치되어 있는지 확인하려면 다음 명령을 실행합니다.

ng –version

 Angular CLI 및 기타 패키지의 버전이 표시되어야 합니다.  위 이미지와 같이 버전 번호가 표시되면 CLI Angular 시스템에 성공적으로 설치되었는지 확인할 수 있습니다. CLI Angular 시스템에 전역으로 설치되어 있는지 확인하는 또 다른 방법은 npm list 명령을 실행하는 것입니다.

 npm list -g @angular/cli --depth=0

위의 명령은 설치된 Angular CLI 버전을 반환하고 Angular CLI가 컴퓨터에 성공적으로 설치되었는지 확인할 수 있습니다.

Upgrade Angular CLI 

경우에 따라 CLI Angular 최신 버전으로 업그레이드해야 할 수 있습니다. 다음 세 가지 명령의 조합을 사용하여 이 작업을 수행할 수 있습니다.

npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/cli

때로는 -force를 사용하여 캐시를 정리해야 할 수도 있습니다.

Getting help in Angular CLI

help 명령을 사용하여 CLI Angular 도움말을 볼 수 있습니다.

ng help 

Angular 위 이미지와 같이 사용 가능한 모든 도움말 옵션을 나열합니다.  다음을 실행하여 특정 명령에 대한 도움말을 얻을 수 있습니다.

ng [command name] –help

첫 번째 응용 프로그램 만들기

CLI Angular 설치되면 해당 명령을 사용하여 새 Angular 프로젝트를 생성할 수 있습니다. ng new 명령을 사용하여 새 응용 프로그램을 만들 수 있습니다.

ng new helloworld --skip-install

위에서 우리는 HelloWorld 라는 새로운 프로젝트를 만들었습니다.–skip-install을 사용하여 종속성을 설치하지 않는 옵션을 선택했습니다. 종속성을 설치하기 위해 npm install을 별도로 실행합니다.  아래 명령을 실행하면 프로젝트가 생성되고 종속성도 설치됩니다.

ng new helloworld

CLI를 사용하여 새 프로젝트를 만들 때 두 가지 옵션을 묻는 메시지가 Angular

1. 프로젝트에 라우팅을 추가할지 여부
2. CSS, SCSS 및 LESS 등과 같이 선택하려는 스타일링

라우팅을 추가할지 여부를 선택할 수 있으며 응용 프로그램 스타일을 지정하는 다른 방법을 선택할 수도 있습니다.  응용 프로그램이 만들어지면 모든 코드 편집기에서 해당 응용 프로그램을 열어 작업할 수 있습니다. 요즘 Visual Studio Code는 매우 인기가 있습니다.  다음 명령을 사용하여 scaffold 응용 프로그램을 실행할 수 있습니다.

 ng serve 

보시다시피 응용 프로그램은 성공적으로 컴파일되었으며 기본적으로 poet 4200에서 실행됩니다. ng serve 명령으로 사용할 수 있는 많은 옵션이 있습니다. 더 자세히 살펴보려면 ng new 명령을 사용하여 다양한 옵션을 사용할 수 있으며 도움말과 함께 실행하십시오.

ng new –help

보시다시피 프로젝트 이름인 인수가 하나 있으며 그 외에도 많은 옵션을 사용할 수 있습니다.  예를 들어

ng new HelloWorld –dry-run 

위의 명령은 파일에 아무 것도 쓰지 않고 파일을 생성합니다.

ng new HelloWorld –inline-template 

위의 명령은 구성 요소 TS 파일에 템플릿 인라인을 포함합니다.  새로운 Ivy 렌더링 Angular 사용할 수 있는 명령 옵션도 있습니다.

ng new HelloWorld  --experimental-ivy 

ng new 명령에는 알고 있어야 할 많은 옵션이 있습니다.

ng new 명령으로 새 프로젝트를 생성하면 package.json 파일을 열어 다양한 옵션과 종속성을 탐색할 수 있습니다.

예를 들어 이 특정 프로젝트에 대한 package.json 파일에서 시작, 빌드 및 테스트 명령을 변경할 수 있습니다.  또한 파일에서 다양한 프로젝트 종속성을 찾을 수 있습니다.  CLI에 대한 컨피그레이션을 포함하는 또 다른 중요한 파일은 Angular 파일입니다angular.json.

 

이 파일에는 이 특정 프로젝트에 대한 Angular CLI와 관련된 모든 구성 정보가 포함되어 있습니다.  예를 들어, 접두사 속성을 고려해 보겠습니다.  기본적으로 app으로 설정되어 있습니다. 따라서 구성 요소, 서비스 등을 만들 때마다 이름 앞에 app이 붙습니다.  AppComponent에서 알 수 있듯이.

비즈니스 요구 사항에 맞게 접두사를 변경해야 하는 요구 사항이 있을 수 있습니다.  예를 들어 접두사를 회사 이름 foo로 설정하려고 합니다. 다음 세 가지 방법으로 app 대신 foo를 접두사로 사용하도록 CLI Angular 구성할 수 있습니다

1. By manually changing angular.json file
2. ng new 명령과 함께 –prefix 옵션을 사용하여
3. 전역 설정을 위해 ng config를 사용하여

angular.json에서 prefix 값을 변경 한 다음 명령을 실행하여 로그인 구성 요소를 생성했습니다.  이제 생성된 구성 요소에는 접두사 foo가 사용된 것을 볼 수 있습니다.

angular.json 변경하지 않으려면 ng new 를 실행할 때 prefix 옵션을 사용할 수 있습니다.

ng new helloword1 --prefix foo --skip-tests

위의 명령에서 두 가지 옵션을 결합했습니다. Angular CLI를 사용하면 옵션을 결합하여 원하는 대로 프로젝트를 만들 수 있습니다. 위의 명령에서 접두사가 foo 로 설정된 새 프로젝트를 만들고 테스트 파일(*.spec) 파일도 생성하지 말라고 말합니다. 출력으로 Angular CLI는 프로젝트를 만들고 아래 이미지와 같이 foo 가 접두사로 붙은 것을 볼 수 있습니다.

ng new 명령과 원하는 수의 옵션을 결합하여 새로 생성된 프로젝트에 대해 원하는 구성을 가져올 수 있습니다.

Generate Commands

Angular CLI는 다양한 회로도를 생성하기 위한 ng generate 명령을 제공합니다.  예를 들어 다음을 사용할 수 있습니다.

ng generate component login

위의 명령은 프로젝트에 LoginComponent라는 구성 요소를 생성합니다. ng generate에서 사용할 수 있는 많은 옵션이 있습니다. –help 옵션을 사용하여 나열할 수 있습니다.

ng generate –help

보시다시피, 가능한 다양한 옵션을 가진 인수로 회로도를 사용합니다. 사용 가능한 회로도 인수는 다음과 같습니다.

• appShell
• application
• class
• 구성 요소
• directive
• 열거형
• guard
• interface
• 도서관
• module
• 파이프
• service
• serviceWorker
• universal

generate 명령을 사용하여 구성 요소를 생성하거나 프로젝트에 serviceWorker를 추가하여 프로그레시브 웹 앱으로 변환할 수도 있습니다.

ng generate serviceWorker

컴포넌트 생성

ng generate 명령을 사용하여 새 구성 요소를 생성할 수 있습니다. 아래에서는 dry 옵션을 사용하여 generate 명령을 실행하고 있습니다.

ng generate component products –dry

모든 것이 올바른지 확인하기 위해 dry 옵션과 함께 generate 명령을 실행했습니다.  드라이 모드에서 명령을 실행하여 명령을 확인해야 합니다.  아래 명령을 사용하여 구성 요소를 생성할 수 있습니다.

ng generate component products

위의 명령은 프로젝트에 products라는 폴더와 다음 파일을 추가합니다.

1. component.ts
2. component.html
3. component.css

products.spec.ts 추가되지 않았습니다. hellowworld1 프로젝트가 –skip-tests 옵션으로 생성되었기 때문입니다. ng generate component 를 사용하여 다양한 옵션을 구성하여 템플릿과 스타일이 외부 파일에 있어야 하는지 또는 구성 요소 클래스의 인라인에 있어야 하는지 결정할 수 있습니다. –help 명령으로 사용 가능한 옵션을 확인할 수 있습니다.

ng generate component –help

 보시다시피 사용 가능한 다양한 옵션은 다음과 같습니다.

• –change-detection
• –엔트리 컴포넌트
• –export
• –flat
• –인라인 스타일
• –인라인 템플릿
• –lint-fix
• –module
• –prefix
• –프로젝트
• –selector
• –skip-import
• –skip-tests
• –spec
• –style
• –styleext
• –view-encapsulation

이러한 옵션에 사용할 수 있는 바로 가기도 있습니다. 도움말에서 구성 요소 생성 옵션에 대한 자세한 내용을 읽을 수 있습니다. 이제 뷰 캡슐화 및 변경 감지가 미리 구성된 구성 요소를 생성하려고 한다고 가정해 보겠습니다. 아래 명령으로 수행 할 수 있습니다.

ng g c addproduct  --v ShadowDom --c OnPush

여기에서는 command 및 options에 대한 바로 가기를 사용했습니다. Shadow Dom View Encapsulation 및 OnPush Change Detection을 사용하도록 구성 요소를 구성하고 있습니다. 생성된 컴포넌트는 다음과 같습니다.

여러 옵션을 결합하여 프로젝트에 필요한 구성 요소를 생성할 수 있습니다.

Generate 지시문

다음 명령을 사용하여 지시문을 생성할 수 있습니다.

ng generate directive creditcard

위의 명령은 아래 이미지와 같이 프로젝트에서 지시문을 생성합니다. selector는 프로젝트를 생성하는 동안 접두사 foo를 사용하도록 프로젝트를 구성했기 때문에 app 대신 foo 로 시작한다는 점을 명심하십시오.

구성 요소와 마찬가지로 지시문 생성에서도 사용할 수 있는 많은 옵션이 있습니다. –help를 사용하여 나열할 수 있습니다.

ng generate directive  --help

 지시문 생성에 사용할 수 있는 다양한 옵션은 다음과 같습니다.

• –export
• –flat
• –lint-fix
• –module
• –프로젝트
• –selector
• –skip-import
• –skip-tests
• –spec

이러한 옵션을 다양한 조합으로 사용하여 프로젝트에 필요한 지시문을 생성할 수 있습니다.

Generate Service

컴포넌트와 지시문을 생성하는 방식으로 다음을 생성할 수 있습니다.

1. Service
2. 파이프
3. Interface
4. Class
5. Enum etc.

서비스 실행 명령을 생성하려면 다음을 수행합니다.

ng generate service foodata

위의 명령은 프로젝트에서 서비스를 생성합니다.  다음을 탐색할 수 있습니다.

ng generate –help

사용 가능한 다른 회로도 옵션을 찾습니다.

세우고 섬김

ng build 명령을 사용하여 Angular 애플리케이션을 빌드할 수 있습니다.

ng build

보시다시피 ng build는 브라우저에서 다운로드할 파일을 생성합니다. 그들은:

• Main
• Polyfills
• 런타임
• 스타일
• Vendor

ng build에는 –help 명령으로 나열 할 수있는 많은 옵션이 있습니다.

ng build –help

 다음과 같은 많은 옵션을 사용할 수 있습니다.

• –aot
• –base-href
• –prod
• –deploy-url
• –output-hashing
• –소스 맵 등

위에 나열된 옵션을 사용할 수 있는 많은 옵션이 있습니다. 도움말에서 자세히 알아볼 수 있습니다.

파일 변경 사항을 추적하는 애플리케이션을 빌드하고 제공하려면 ng serve 명령을 사용해야 합니다.  기본적으로 포트 4200에서 응용 프로그램을 제공합니다.

ng serve 

성공적으로 수행했다면 위와 같이 Successfully Compiled 메시지가 표시되어야 합니다. 또한 응용 프로그램이 포트 4200에서 수신 대기하고 있다고 말합니다.  –help 명령을 사용하여 ng serve에서 사용할 수 있는 다양한 옵션을 나열할 수 있습니다.

요약

이 기사에서는 Angular CLI 및 CLI와 함께 사용할 수 있는 다양한 명령에 대해 배웠습니다. Angular 애플리케이션의 빠른 개발을 위해 Angular CLI를 사용해야 합니다.