首先谈谈angular、 Vue和React。Vue的作者尤雨溪是个中国人，他是个很励志的人物，大家可以从https://www.jianshu.com/p/3092b382ee80这篇文章看到对他的采访，Vue是为数不多中国人创作的目前最热门最具前景的前端框架之一，与angular、React齐名。网上关于三个产品对比的文章可参考：https://baijiahao.baidu.com/s?id=1609374985643812253&wfr=spider&for=pc。

我选择Angular的原因很简单，第一因为社区庞大，技术问题容易找到对应的支撑。第二、基于MVC，目前我的工作一直都围绕和AngularJs1.x的一个很大不同，便是Angular使用了TypeScript，而1.x则使用了JavaScript，也是两者不能兼容的一个很重要的原因】，之前我根本没接触过1.x，之前也较少接触Vue和React，对于未来而言，我对Angular更有信心，所以坚定的选择了Angular为后面所有微服务应用的前端开发框架。

我们尝试使用Angular9.0来新建一个测试项目, 你需要按以下步骤来操作并实践。

1、 安装Node.js，并在命令行使用node -v验证是否安装成功，网上安装教程很多，直接百度。

2、 全局安装ts, npm install -g typescript。

3、全局安装cli脚手架工具 npm install -g @angular/cli, 如果安装有问题可以使用cnpm。

4、 检查angular/cli安装情况，ng –version

5、 创建新项目 ng new hello-world，在创建新项目时，可能这个过程会卡住，因为这步需要通过npm安装依赖包。所以我们的做法是 ng new hello-world --skip-install,然后再进去hello-world项目使用cnpm install安装依赖包。

6、 第五步可能还会出现node包的安装错误，这是npm的问题，在vue项目、react项目、angular项目都可能出现此错误。

6.1 需要删除npmrc文件。在C:\Users\{账户}\下的.npmrc文件.强调：不是nodejs安装目录npm模块下的那个npmrc文件

6.2 找到D:\Program Files\nodejs \node_modules\npm里面的npmrc这个文件，打开可以看到就只有prefix=${APPDATA}\npm，

　　       修改为：

     registry=https://registry.npm.taobao.org/
　　     prefix= D:\Program Files\nodejs\npm_global
　　     cache= D:\Program Files\nodejs\npm-cache

        按上面步骤修改之后，运行则成功了。

7、 运行项目，在命令行输入 指令，我们发现了报错如下：

原因是我们的某个模块没有安装正常，首先进入项目目录删除掉node_modules。然后重新执行cnpm rebuild node-sass，接下来重新安装所有模块，运行cnpm install.看到一切正常之后，再执行ng serve –-open（加open参数可以直接打开浏览器衔接），这时候我们打开浏览器，输入http://localhost:4200/, 看到如下界面证明首个项目创建成功。

我们打开这个项目目录，查看src的app目录，

在这里看到 AppComponent 壳的三个实现文件：

1、app.component.ts— 组件的类代码，这是用 TypeScript 写的。

2、app.component.html— 组件的模板，这是用 HTML 写的。

3、app.component.css— 组件的私有 CSS 样式。

打开组件的类文件 (app.component.ts)，并把 title 属性的值修改为

保存之后我们可以看到ng已经自动帮我们编译好，浏览器直接出现结果，也无需刷新，实在非常方便。(后面我们会演示使用webstorm来编写代码/调试)

关于Angular详细的教程可以参考腾讯云，里面介绍的真的非常详细，可以对照实现：https://cloud.tencent.com/developer/section/1489508。

本文重点还有一块内容就是SpringBoot的后端程序如何与angular9.0的前端融合。首先我们要知道angular的前端的代码可以通过ng build去编译,生成dist目录中的静态资源文件，这些静态资源文件如果和后端进行交互，只需要和后端的API进行数据交换即可。正因为如此，我们没有必要将Angular的代码放进JavaWeb里面，而是将Angular编译之后的静态文件放入JavaWeb项目中就可以了。

我们拿之前建的一个SpringBoot项目来做这个事情，之前有个personcontroller的项目，在src/main下新建一个ngsrc的目录摆放angular的源码，我们进入该目录按照上面的步骤新建一个angular的项目，取名为personview,测试下ng serve没有问题后我们就可以开始将ngsrc编译到springboot的web下了，编译命令：

ng build --output-path=../../resources/static

我们就可以在src/main/resources/static下看得目录下包含了angualr编译出来的前端文件。然后我们启动springboot项目，打开http://192.168.43.1:8080,就可以看到angular生成的前端页面了。

       第二章我将实现一个增删改查的例子来展示如何从程序上将两个框架进一步融合起来。