각도 CLI 사용에 대한 자세한 설명

이번에는 Angle cli 사용에 대한 자세한 설명을 가져오겠습니다. Angular cli 사용 시 주의사항은 무엇인가요?

배경 소개

Angular 버전과 관련하여 Angular는 공식적으로 Angular 1.x를 Angular JS로 명명했습니다. Angular 2.x 이상은 총칭하여 Angular

입니다. CLI는 Command Line Interface의 약어로 ionic cli, vue cli 등과 같은 자동화된 개발 프로세스를 구현하고 프로젝트 생성, 파일 추가 및 많은 개발 작업 수행이 가능합니다. , 테스트, 패키징 및 출시와 같은.

설치Angular CLI

1. 먼저 node.js 및 npm

// 显示当前node和npm版本
$ node -v
$ npm -v
// node 版本高于6.9.3 npm版本高于3.0.0

이 설치되어 있는지 확인하세요. 2. 전역적으로 TypeScript 설치(선택 사항)

$ npm install -g typescript 
// 新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。

3. Angular CLI

$ npm install -g @angular/cli

설치 오래 기다리지 않으면 Angular CLI가 설치됩니다. 확인해 보세요:

$ ng v
// 出现下面画面说明安装成功，如果不成功你可能需要uninstall一下，再重新来过
$ ng v
  _           _          _   _
  / \  _    _ _  _| |  _ _    / _| |  |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '|  | |  | |  | |
 / _ \| | | | (_| | |_| | | (_| | |   | |_| |_ | |
/_/  \_\_| |_|\, |\,_|_|\,_|_|    \|_|_|
        |_/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64

새로운 Angular 프로젝트

$ ng new my-app

여기서 기다리는 데 시간이 오래 걸립니다. 아마도 141M의 항목을 다운로드해야 할 것입니다.

이미 프로젝트 폴더를 만든 경우 ng init my-app을 사용하여 새 프로젝트를 만들 수 있습니다. ng init와 ng new의 차이점은 ng new를 사용하면 프로젝트와 동일한 이름의 폴더를 만드는 데 도움이 된다는 것입니다.

다운로드하는 동안 ng new를 실행한 후 Angular cli가 수행한 작업을 살펴보겠습니다.

$ ng new helloKeriy
installing ng
 create .editorconfig
 create README.md
 create src/app/app.component.css   // 使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
 create src/app/app.component.html
 create src/app/app.component.spec.ts
 create src/app/app.component.ts    // 定义AppModule，这个根模块会告诉Angular如何组装该应用
 create src/app/app.module.ts
 create src/assets/.gitkeep      // 这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
 create src/environments/environment.prod.ts
 create src/environments/environment.ts
 create src/favicon.ico    // 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
 create src/index.html     // 宿主页面
 create src/main.ts
 create src/polyfills.ts
 create src/styles.css     // 公共样式
 create src/test.ts      // 这是单元测试的主要入口点
 create src/tsconfig.app.json
 create src/tsconfig.spec.json
 create src/typings.d.ts
 create .angular-cli.json   // Anguar 编译依赖
 create e2e/app.e2e-spec.ts  // e2e 端对端测试目录
 create e2e/app.po.ts
 create e2e/tsconfig.e2e.json
 create .gitignore
 create karma.conf.js
 create package.json      // Angular 的依赖包
 create protractor.conf.js
 create tsconfig.json     // TypeScript 编译器的参数
 create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'helloKeriy' successfully created.

Taobao 미러 설치를 사용하는 것이 좋습니다:

$ ng new helloKeriy --skip-install // 先跳过npm安装
$ cd helloKeriy
$ cnpm install           // 使用淘宝源安装

결과 표시

설치가 완료되면 프로젝트를 시작할 수 있습니다:

cd helloKeriy
ng serve -open

ng Serve 명령은 개발 서버를 시작하고, 파일 변경 사항을 수신하고, 이러한 파일이 수정되면 애플리케이션을 다시 빌드합니다.

--open(또는 -o) 매개변수를 사용하면 자동으로 브라우저를 열고 http://localhost:4200/에 액세스할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

BootStrap 작업 데이터 테이블

vue는 SMS 인증 코드 카운트다운을 구현합니다

위 내용은 각도 CLI 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!