从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

你可能感兴趣的:(从Java角度理解Angular之入门篇:npm, yarn, Angular CLI)