用Spring Boot & Cloud，Angular2快速搭建微服务web应用 - AngularJS2客户端

最新推荐文章于 2024-08-24 08:57:28 发布

cuiwader

最新推荐文章于 2024-08-24 08:57:28 发布

阅读量1.2w

点赞数

文章标签： spring angular2

本文链接：https://blog.csdn.net/cuiwader/article/details/52639368

版权

本文介绍了如何使用Spring Boot & Angular2快速搭建微服务Web应用，包括开发环境的配置、服务端RESTful CRUD实现、Angular2客户端组件详细步骤，并提到了跨域访问的问题及解决方案，引导读者进入系列教程的后续章节。

摘要由CSDN通过智能技术生成

开发环境搭建

AngularJS2的开发需要node.js环境。在Windows下面安装node.js，最好使用NVM（Node Version Manager）。在这里可以找到NVM的详细信息： https://github.com/creationix/nvm/

安装好NVM之后，用nvm install latest命令，会自动安装最新版本的node.js以及npm。另外还需要在系统的环境变量PATH里面添加node的路径，已方便使用。

实现

建立一个portal目录，并且添加package.json，tsconfig.json，type.json，systemjs.config.js。这些都是AngularJS2项目标准的配置文件，详细信息请参考AngularJS2的快速开始文档： https://angular.io/docs/ts/latest/quickstart.html，只需要修改一下package.json里面的name就可以了。之后在cmd，或者git bash里面，进入portal目录，运行npm install，npm会自动安装AngularJS2所需要的所有依赖包。其它为文件和目录也按照这个快速开始文档建立，包括一个index.html，一个app目录。另外portal下面有app.component.html，app.module.ts，app.routing.ts，main.ts，这些都是每个AngularJS2项目都有的文件。TS文件使用了TypeScript语言，是Angular推荐的语言。其中app.routing.ts定义了网站的路由，具体路由的使用信息请参考： https://angular.io/docs/ts/latest/tutorial/toh-pt5.html。代码里面有一个地方值得提一下，即app.component.html这个文件，实际上做了我们这个单页应用的主视图。所有其它routing里面的视图，都是嵌入到该文件的router-outlet标签的。该标签实际上是一个Angular2的指令，告诉router应该在那里显示视图。具体请参考： https://angular.io/docs/ts/latest/guide/router.html。我们具体看一下AngularJS2调用上节中建立的user-service的代码。这些基本的代码不再一一列出，请参考github上面的代码：