【Angular笔记】Angular CLI的安装和使用

Angular CLI的介绍

---

Angular CLI是Angular的构建工具

Angular CLI的安装

---

正常步骤：

• 命令行输入npm install -g @angular/cli

国内步骤：

• 命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝npm镜像

• npm的国内镜像cnpm安装好之后，命令行输入 cnpm install -g @angular/cli 完成angular cli的安装

Remark

• 完成以上安装步骤之后，可以确认一下版本npm -v、cnpm -v、ng -v. 另外Angular CLI的命令都是ng开头，查询angular cli的版本是输入命令行ng -v

• 命令行大全可以通过输入ng help 查看，里面有ng命令行的解释和介绍
  
  

Hello Angular CLI

---

正常步骤

• 命令行输入 ng new ，e.g. ng new myapp 创建一个叫myapp的angular项目.

• 命令行输入 cd myapp，进入myapp的路径.

• 命令行输入ng serve 启动ng服务器.

以上官方推荐步骤，但是由于国内网络的问题，可能导致下载速度过慢，所以国内开发者建议使用以下步骤节省开发时间。

国内步骤

• 命令行输入ng new --skip-install ，e.g.ng new myapp --skip-install 这样可以使得创建项目的时候跳过npm下载相关的依赖库

• 命令行输入cd myapp 进入相应的项目目录下（myapp 要改成自己的项目名字）

• 命令行输入cnpm install ，用淘宝的镜像cnpm安装相关的依赖库

• 命令行输入ng serve 启动服务

Remark

• ng serve启动服务器之后,端口为4200，在浏览器地址上输入localhost:4200便可以访问到我们刚刚创建的angular 项目渲染出来的东西了。
  
  
  

目录介绍

---

• package.json
  里面写着Angular项目所引用到的一些类库

• angular-cli.json
  配置了编译过程中使用的一些路径以及一些图标，样式和他们的一些依赖关系

• e2e
  e2e是一个测试目录

• node_modules
  是npm相关依赖库的存放位置

• src
  项目目录路径

学习网站

---

以上内容都是学习慕课网的angular cli的教学视频而来，在此向教程创作人表示感谢！
慕课网-Angular-cli基础

当然官方文档也是一个好出去，强烈推荐
Angular中文社区-快速上手Angular