Angular CLI 설치 튜토리얼

이 글은 Angular 개발과 학습을 위한 Angular CLI의 설치와 사용법을 주로 소개하고 참고용으로 올려드립니다.

이전에 개발 환경을 준비해 두었으니, 이제 정식으로 개발할 수 있게 되었습니다. 앞서 언급했듯이 Angular는 프로그램 개발을 단순화할 수 있는 명령줄 도구를 제공합니다. 향후 개발에도 이 도구를 사용할 것이므로 먼저 Angular CLI라는 개발 도구를 설치해야 합니다.

CLI 설치 과정은 매우 간단하여 다른 도구를 설치하거나 일반 개발 패키지를 설치하는 것과 다르지 않습니다. NPM 레지스트리를 구성하고 Yarn을 성공적으로 설치했으므로 Yarn을 사용하여 이 도구를 설치할 수 있습니다. 구체적인 명령은 다음과 같습니다.

yarn global add @angular/cli

Parameters global은 전역 설치를 나타내고, add는 "추가"를 나타냅니다. 마지막은 CLI 패키지 이름이며 버전은 표시되지 않습니다. 따라서 Yarn은 최신 버전의 CLI를 설치하라는 메시지를 받게 됩니다. . 이 문은 이전 NPM의 global 说明是在全局安装； add 说明是在“添加”；最后是 CLI 的包名，没有注明版本好的话，会让 yarn 安装最新版的 CLI。。这一语句与之前 NPM 的

npm install -g @angular/cli

是等价的。

之后我们运行

ng version

如果能够输出 Angular CLI 的版本号，说明安装成功。注意，Angular CLI 的所有命令都是以 ng 开始的。

Angular CLI 建立在 webpack 基础之上，可以帮助我们生成 Angular 项目框架，生成 Angular 模块、组件、指令等。如果手动搭建这一开发环境，需要了解 webpack 的各种细节、编写各种自动化脚本等，要求较高的前端开发技术。考虑到我们的基础教程，使用 CLI 辅助开发无疑是合适的。我们会在后面的章节中详细介绍 Angular CLI 的使用，如果你对 Angular CLI 感兴趣，可以通过其官方网站 了解更多的细节。

刚刚安装完成的 CLI 默认使用 NPM 作为包管理工具。我们希望使用 yarn，只需运行下面的命令：

ng set --global packageManager=yarn

反之，如果想换回 NPM，只需使用

ng set --global packageManager=npm

即可。

安装好 Angular CLI，下面我们来创建第一个示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

创建一个演示项目。 new 是创建一个全新项目，后面的 demo 是项目的名字。Angular CLI 会帮我们生成完整的项目框架——包括项目所需所有文件、文件结构以及各种辅助文件等。之后，Angular CLI 会自动运行 yarn install ，这是在安装项目所需要的各种依赖。安装过程会比较漫长，需要耐心等待一段时间。

当出现类似上面的界面，提示“Projecy ‘demo' successfully created”时，表示项目已经创建完成。如果有错误，需要检查安装过程或者网络连接等。

项目创建完毕，会在当前目录下生成一个项目文件夹。之后我们可以进入项目目录

cd demo

然后运行

ng serve

ng serve

ng build --prod

와 동일합니다.

이후

rrreee

를 실행하면 Angular CLI의 버전 번호가 출력될 수 있으면 설치가 성공한 것입니다. 모든 Angular CLI 명령은 ng로 시작합니다.

Angular CLI는 webpack을 기반으로 구축될 수 있습니다. Angular 프로젝트 프레임워크를 생성하고 Angular 모듈, 구성 요소, 지침 등을 생성하는 데 도움을 주세요. 이 개발 환경을 수동으로 구축하려면 webpack의 다양한 세부 사항을 이해하고, 다양한 자동화 스크립트를 작성하는 등 더 높은 수준의 프런트엔드 개발 기술이 필요합니다. 기본 튜토리얼을 고려하면 CLI를 사용하여 개발을 지원하는 것이 확실히 적절합니다. Angular CLI의 사용법은 다음 장에서 자세히 소개하겠습니다. Angular CLI에 관심이 있다면 공식 홈페이지를 통해 더 자세히 알아볼 수 있습니다.

방금 설치된 CLI는 기본적으로 NPM을 패키지 관리 도구로 사용합니다. Yarn을 사용하려면 다음 명령을 실행하세요.

rrreee

반면, NPM으로 다시 전환하려면

rrreee🎜를 사용하세요. 🎜🎜Angular CLI를 설치한 후 Angular CLI의 기본 사용법을 이해하기 위해 첫 번째 샘플 프로젝트를 생성해 보겠습니다. 🎜🎜먼저 🎜rrreee🎜를 사용하여 데모 프로젝트를 만듭니다. new는 새 프로젝트를 생성하는 것이고, 다음 demo는 프로젝트 이름입니다. Angular CLI는 프로젝트에 필요한 모든 파일, 파일 구조 및 다양한 보조 파일을 포함하여 완전한 프로젝트 프레임워크를 생성하는 데 도움이 됩니다. 이후 Angular CLI는 프로젝트에 필요한 다양한 종속성을 설치하는 yarn install을 자동으로 실행합니다. 설치 과정은 시간이 오래 걸리기 때문에 인내심을 갖고 기다려야 합니다. 🎜🎜🎜🎜 위와 비슷한 인터페이스가 나타나면, "Projecy 'demo'가 성공적으로 생성되었습니다"라는 메시지가 나타나면 프로젝트가 생성되었음을 의미합니다. 오류가 있는 경우 설치 과정이나 네트워크 연결 등을 확인해야 합니다. 🎜🎜프로젝트가 생성되면 현재 디렉터리에 프로젝트 폴더가 생성됩니다. 그런 다음 프로젝트 디렉터리 🎜rrreee🎜에 들어가서 🎜rrreee🎜🎜🎜ngserv 이 명령은 프로젝트를 컴파일한 다음 내장된 소형 서버를 시작합니다. 브라우저를 통해 프로젝트의 실행 결과를 볼 수 있습니다. 위의 팁에 주의하세요. NG Live 개발 서버는 localhost:4200에서 수신 대기합니다. http://localhost:4200/에서 브라우저를 엽니다. 즉, 이 서버의 주소는 http://localhost:4200이어야 합니다. , 브라우저로 이 주소를 방문하면 됩니다: 🎜🎜🎜🎜🎜기본적으로 Angular CLI에서 생성된 프로젝트 페이지의 실행 결과를 볼 수 있습니다. 🎜🎜이 내장 서버는 개발 및 테스트에만 적합하며 실제 사용을 위한 서버로 사용할 수는 없습니다. 따라서 정식 서버에 배포하려면 프로젝트를 릴리스 버전으로 컴파일해야 합니다. 릴리스 버전을 컴파일하는 것도 매우 간단합니다. 🎜rrreee🎜컴파일이 완료된 후 프로젝트 폴더를 열면 dist 디렉터리가 표시됩니다. 그 안에 있는 파일은 전체 프로젝트를 실행하는 데 필요한 파일입니다. 애플리케이션을 배포할 때 이 폴더의 모든 파일을 서버에 배포하기만 하면 됩니다. 🎜🎜프로젝트 생성부터 시작하여 프로젝트 개발 및 테스트, 마지막으로 프로젝트 패키징 및 배포까지 모두 Angular CLI에서 제공하는 다양한 기능을 사용합니다. 보시다시피 Angular CLI는 원스톱 개발 모델을 제공하므로 Angular CLI를 사용하여 Angular 프로젝트를 쉽게 개발할 수 있습니다. 그러나 여기서 설명하는 것은 가장 간단한 사용법일 뿐입니다. 공식적인 사용에서는 필요한 파일과 프로젝트를 생성하기 위해 많은 추가 매개변수가 추가될 수 있습니다. 자세한 내용은 Angular CLI 문서를 읽어야 합니다. 다음 장에서 관련 내용이 나오면 다시 소개하겠습니다. 🎜🎜위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜

관련 기사:

JavaScript를 사용하는 비동기보다 더 나은 솔루션이 있을까요?

Koa를 사용하여 Node.js를 통해 프로젝트 빌드

React Native Flexbox 레이아웃에 대한 자세한 해석

위 내용은 Angular CLI 설치 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!