从Java角度理解Angular之入门篇：npm, yarn, Angular CLI

原文link:
https://www.cnblogs.com/jiangzhaowei/p/10287649.html

本系列从Java程序员的角度，带大家理解前端Angular框架。

本文重点介绍Angular的开发、编译工具：npm, yarn, Angular CLI，它们就像Java在中的Maven，同时顺便介绍一些Angular的概念。学习之后，希望你能够在自己的环境下练习、探索、编写出自己的第一个基于Angular的Web应用。

在开始介绍之前，先了解下一些背景知识，理解单页应用与传统基于模板的多页应用在Web开发思路的不同。

什么是单页应用（Single Page Application，SPA）
单页应用是Web前端发展的主流趋势。

服务端渲染
传统的Web前端是多页应用的，客户端浏览器向服务器提交请求，服务端通过处理HTML模板（如PHP,ASP,JSP等），生成HTML文本返回给浏览器，浏览器重新渲染并且展示。HTML完全有后端决定，因此称为“服务端渲染”。客户端每次拿到都是一个HTML页面，这样一个Web应用就有很多页面，因此叫多页应用。

服务器 ----(html页面)---> 浏览器
由于浏览器每次都要解析整个HTML并渲染，因此效率较低，每次即使更新一个数据也要在网络上传输整个HTML文本，占用更多的带宽。

客户端渲染
不同于传统多页应用，在SPA应用中，客户端浏览器向服务器提交请求，服务端返回数据（通常是json格式）给浏览器，浏览器中的js更新相应部分的DOM，从而更新展示。渲染的过程是在客户端浏览器完成的。

服务器 ----(json数据)---> 浏览器

优点：

局部刷新。无需每次都进行完整页面请求。
　　天然的前后端分离。后端不再有渲染展示逻辑，只要专注业务逻辑并能够向前端提供数据；而前端只关注如何展示数据、处理用户交互，提高用户体验。这很像C/S架构，富客户端，只不过客户端是浏览器中的js脚本。
　　计算量转移。原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。
缺点：

首次打开较慢。由于是富客户端(js脚本)，当客户端首次打开网页，需要先下载一堆js和css后才能看到页面。对于这一点，SPA也有应对方案，比如可以（1）分拆打包（把js拆成多个包，首屏用到的先传）；（2）先传个友好的加载页面；（3）同构（第一次加载是采用后端渲染，以后用前端渲染）。
　　不方便搜索引擎。传统的搜索引擎会从HTML中抓取数据，导致前端渲染的页面无法被抓取。不过这一点，随着SPA的流行，Google爬虫也可以像浏览器一样理解js脚本了。
流行的SPA框架
　　流行的SPA框架有React, Vue, Angular。本文基于Angular 2/4/5+（不是Angular 1.x或AngularJS）。

node.js
　　就像Java开发需要JDK，Angular开发需要node.js。Java编译出来的字节码需要Java虚拟机JRE执行，而如果想在浏览器以外执行JavaScript代码，也需要类似的虚拟机平台，也就是node.js。

类似JDK，node.js下载之后也不需要安装，只要加到PATH路径下即可。这里需要node.js是因为很多前端开发工具是有JavaScript写成的，如npm，它们需要node.js这个虚拟机。

项目依赖管理工具
　　像Java中的maven，开发Angular可以使用npm或者yarn。其中npm是node.js自带的，可以直接使用。

另外，npm还有maven不具备的能力，它可以从网上下载并安装软件，类似于Linux中的yum。比如，yarn可以通过npm下载安装：

npm install --global yarn
　　npm作为项目依赖管理有个缺点，它没有本地仓库，对同一个依赖，不管其他项目是否已经下载过，只要这个项目没有，它都从网上下载。下载后存在每个项目下的node_modules/路径下。相比，maven有本地仓库，对同一个依赖只会下载一次，存在~/.m2/repository/下。

与npm不同的是，yarn无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式。只要其他项目已经下载过，就不会上网下载，但依然会拷贝到项目下的node_modules/路径。另外，yarn的运行速度得到了显著的提升，整个安装时间也变得更少。所以推荐使用yarn管理项目依赖。

仓库
　　maven有中央仓库，也可以创建私服；npm,yarn同样都有，可以配置：

npm config set registry http://registry.npmjs.org/
　　yarn config set registry https://registry.yarnpkg.com/
脚手架
　　脚手架可以简化开发，创建工程框架。比如maven可以使用archetype:generate来创建基于maven约定的java工程。

脚手架创建的项目，一般包含以下内容：
　　1. 编译脚本、依赖定义
　　2. 源代码路径及样例
　　3. 单元测试路径及样例
　　4. 资源路径
　　5. 环境配置（开发环境、生产环境、测试环境）
　　6. 编译目标路径（编译后生成）

Angular脚手架
　　Angular CLI是Angular官方提供的命令行工具，可以帮助我们创建项目、编译、测试、运行，就像Java界的Maven，另外还可以创建组件、管道、指令、服务、模块、类、接口、枚举。。。

可以用npm安装Angular CLI：

npm install --global @angular/cli
创建Angular项目：

ng new