Explication détaillée de l'utilisation de Angular cli

Cette fois, je vais vous apporter une explication détaillée de l'utilisation d'angular cli Quelles sont les précautions lors de l'utilisation d'angular cli Voici des cas pratiques, jetons un coup d'œil.

Introduction au contexte

Concernant la version Angular, Angular a officiellement nommé Angular 1.x comme Angular JS ; Angular 2.x et supérieur sont collectivement appelés Angular ; CLI est l'abréviation de Command Line Interface. C'est une interface de ligne de commande qui réalise des processus de développement automatisés, tels que : ionic cli, vue cli, etc. ; elle peut

créer des projets

, ajouter des fichiers et effectuer beaucoup de choses. des tâches de développement, telles que les tests, l'empaquetage et la publication.

InstallerCLI angulaire 1. Confirmez d'abord que

node.js

et npm

sont installés 2. Installez TypeScript globalement (facultatif)

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

3. Installez la CLI angulaire

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

Après une attente pas trop longue, votre Angular CLI est installé. Vérifiez :

$ npm install -g @angular/cli

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

Nouveau projet Angulaire

Il faut beaucoup de temps pour attendre ici, probablement 141 millions de fichiers doivent être téléchargés.

$ ng new my-app

Si vous avez déjà créé un dossier de projet, vous pouvez utiliser ng init my-app pour créer un nouveau projet. La différence entre ng init et ng new est que ng new nous aidera à créer un dossier portant le même nom que le projet.

Pendant le téléchargement, jetons un coup d'œil à ce qu'Angular cli a fait pour nous après avoir exécuté ng new :

Il est fortement recommandé d'utiliser l'installation miroir Taobao :

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

Affichage des résultats

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

Une fois l'installation terminée, vous pouvez

démarrer le projet

 :

La commande ng serve démarre le serveur de développement, écoute les modifications de fichiers et reconstruit l'application lorsque ces fichiers sont modifiés.

cd helloKeriy
ng serve -open

Utilisez le paramètre --open (ou -o) pour ouvrir automatiquement le navigateur et accéder à http://localhost:4200/.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Tableau de données de fonctionnement BootStrap

vue implémente le compte à rebours du code de vérification par SMS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!