Ausführliche Erläuterung der Verwendung von Angular CLI

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung von Angular CLI ausführlich erläutern. Schauen wir uns die folgenden praktischen Fälle an.

Hintergrundeinführung

In Bezug auf die Angular-Version hat Angular offiziell Angular 1.x benannt, da Angular JS und höher zusammenfassend als Angular bezeichnet werden CLI ist die Abkürzung für Command Line Interface. Es handelt sich um eine Befehlszeilenschnittstelle, die automatisierte Entwicklungsprozesse wie ionic cli, vue cli usw. implementiert; sie kann

Projekte erstellen

, Dateien hinzufügen und viele andere Dinge ausführen Entwicklungsaufgaben wie Testen, Verpacken und Veröffentlichen.

InstallierenAngular CLI 1. Stellen Sie zunächst sicher, dass

node.js

und npm

installiert sind 2. Typescript global installieren (optional)

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

3. Installieren Sie Angular CLI

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

Nach einer nicht allzu langen Wartezeit ist Ihre Angular CLI installiert. Bestätigen:

$ npm install -g @angular/cli

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

Neues Angular-Projekt

Es dauert hier lange zu warten, wahrscheinlich müssen 141 Millionen Inhalte heruntergeladen werden.

$ ng new my-app

Wenn Sie bereits einen Projektordner erstellt haben, können Sie mit ng init my-app ein neues Projekt erstellen. Der Unterschied zwischen ng init und ng new besteht darin, dass ng new uns dabei hilft, einen Ordner mit demselben Namen wie das Projekt zu erstellen.

Werfen wir während des Downloads einen Blick darauf, was Angular cli für uns getan hat, nachdem wir ng new ausgeführt haben:

Es wird dringend empfohlen, die Taobao-Spiegelinstallation zu verwenden:

$ 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.

Ergebnisanzeige

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

Nachdem die Installation abgeschlossen ist, können Sie

das Projekt starten

:

Der Befehl ng servo startet den Entwicklungsserver, wartet auf Dateiänderungen und erstellt die Anwendung neu, wenn diese Dateien geändert werden.

cd helloKeriy
ng serve -open

Verwenden Sie den Parameter --open (oder -o), um den Browser automatisch zu öffnen und auf http://localhost:4200/ zuzugreifen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

BootStrap-Betriebsdatentabelle

vue implementiert SMS-Bestätigungscode-Countdown

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Angular CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!