Angular CLI简介

痛定思痛。 2022-06-03 23:42 172阅读 0赞

**一、简介**

Angular CLI用于简单，快速构建Angular2项目，只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。

Git 源代码地址：[https://github.com/angular/angular-cli][https_github.com_angular_angular-cli]

**AngularCLI主要特性**  
1 Angular CLI 可以快速搭建框架，创建module，service，class，directive等；  
2 具有webpack的功能，代码分割（code splitting），按需加载；  
3 代码打包压缩；  
4 模块测试，端到端测试；  
5 热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快  
6 有开发环境，测试环境，生产环境的配置，不用自己操心；   
7 sass，less的预编译Angular CLI都会自动识别后缀来编译；  
8 typescript的配置，Angular CLI在创建应用时都可以自己配置；  
9 在创建好的工程也可以做一些个性化的配置，webpack的具体配置还不支持，未来可能会增加；  
10 Angular CLI创建的工程结构是最佳实践，生产可用；

**安装 Angular CLI**

windows： npm install -g angular-cli  
macOS: sudo npm install -g angular-cli

注：安装的时间可能会比较长。

![Center][]

安装成功后，使用 ng help 命令，验证安装是否成功

![Center 1][]

**二、使用 Angular CLI创建Angular项目**

1.创建项目：

ng new project\_name(项目名称)

![Center 2][]

注：安装时如果很慢，设置cnpm ，使用命令：

ng set --global packageManager=cnpm

注2：Installing packages ...加载模块依赖过程，可能也会相对慢一会儿。

2.启动项目

cd project\_name

ng serve --open   //编译运行名称

使用`--open`（或`-o`）参数可以自动打开浏览器并访问`http://localhost:4200/`。

![Center 3][]

运行成功，地址栏输入：http://localhost:4200/

运行结果页面如下：

![Center 4][]

尝试的修改一下app.component.ts中的文字，看看热部署是否马上生效？yes！it does！

3.ng 命令创建模块、类等

ng g module about

![1240][]

# 创建module，component，service，class #

![1240 1][]

[Ionic2 相关文档整理][Ionic2]

[Visual Studio Code v1.18发布][Visual Studio Code v1.18]

[EF Linq字符串模糊查询整理][EF Linq]

ng set --global packageManager=cnpm

[https_github.com_angular_angular-cli]: https://github.com/angular/angular-cli
[Center]: /images/20220604/87435cb3538c4aa7812edf2fa5a1722e.png
[Center 1]: /images/20220604/c0d8eeb4a77042c9bf56b3bcfb6a6cd8.png
[Center 2]: /images/20220604/1f297848d80b4b99ba097892697666b7.png
[Center 3]: /images/20220604/9d529ba86bdb49219e9a4722af92f241.png
[Center 4]: /images/20220604/044d77e0b26a437b89bb3b0da48f2e15.png
[1240]: /images/20220604/526f3e19cd7f4ff0b8ec1c35f8836af8.png
[1240 1]: /images/20220604/3f4164f33f19463aad46cf5035607508.png
[Ionic2]: http://blog.csdn.net/u011127019/article/details/78651570
[Visual Studio Code v1.18]: http://blog.csdn.net/u011127019/article/details/78647045
[EF Linq]: http://blog.csdn.net/u011127019/article/details/78469246