Detailed explanation of the use of angular cli

This time I will bring you a detailed explanation of the use of angular cli, what are the precautions when using angular cli, the following is a practical case, let's take a look.

Background introduction

Regarding the Angular version, Angular officials have unified the naming of Angular 1.x as Angular JS; Angular 2.x and above are collectively called Angular;

CLI is the abbreviation of Command Line Interface. It is a command line interface that implements automated development processes, such as: ionic cli, vue cli, etc.; it can create projects, add files, and perform a lot of development tasks. Such as testing, packaging and publishing.

InstallationAngular CLI

1. First confirm that node.js and npm

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

are installed 2. Install typescript globally (optional)

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

3. Install Angular CLI

$ npm install -g @angular/cli

After a not too long wait, your Angular CLI is installed. Confirm:

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

New Angular Project

$ ng new my-app

It takes a long time to wait here, probably 141M of stuff needs to be downloaded.

If you have already built a project folder, you can use ng init my-app to create a new project. The difference between ng init and ng new is that ng new will help us create a folder with the same name as the project.

While it's downloading, let's take a look at what Angular cli has done for us after running ng new:

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

It is strongly recommended to use Taobao mirror installation:

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

Results display

After the installation is complete, you can start the project:

cd helloKeriy
ng serve -open

The ng serve command starts the development server, listens for file changes, and rebuilds the application when these files are modified.

Use the --open (or -o) parameter to automatically open the browser and access http://localhost:4200/.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

BootStrap operation data form

##vue implements SMS verification code countdown

The above is the detailed content of Detailed explanation of the use of angular cli. For more information, please follow other related articles on the PHP Chinese website!