介绍
本文是基于我的上一篇文章Angular2 项目实战来写的。就是用那个种子工程来作为脚手架来开发一个工作中的应用（不用的内容全部删掉）。主要介绍服务端Spring REST API的开发，到前端数据显示的整个过程，以及使用webpack的proxy，前后端分离就靠它了，前端使用它代理地址，有两个好处，（1）解决开发时候的跨域问题；（2）改改代理的ip和端口方面以后切换各种环境，如本机环境，开发，测试，预生产等环境。
知识点涵盖
1 Spring REST API开发；
2 webpack-dev-serve proxy
3 angular2 HTTP
4 ngFor
准备
（1）两台电脑，一台做API的服务器，一台做web服务器。（其实在一台上面改下端口就行了）
（2）用种子工程搭建好一个项目；
Spring REST API
api
哈哈哈，这个好简单，我随便写了两句，有兴趣的读者可以持久化到数据库。
我的“服务器” 端口是8080，ip地址如下图
服务器ip地址
配置webpack-dev-server 的proxy代理
webpack-dev-server代理
根据我的服务器ip地址和端口，这里配置target。注意，我们这里要匹配一些使用代理的api，这里配置凡是 /api/** 这样的都会转发到这个http://192.168.0.120:8080上，为什么要这么个匹配？因为我们还有很多资源包括页面，css，图片等都在我们的web服务器上（就是本机上的东西），如果配置成／* 那么一切都去我们的后台服务器去找了，所以这里要理解。注意到了没，我的后端api是/api/table 与之是相应匹配的。
Angular2的HTTP
这个是文章的核心才对，建立model
获取数据的service
dashboard中调用service，service通过HTTP模块发起get请求，请求api，返回的结果赋值给tableData。稍后页面进行遍历。
html使用*ngFor进行便利，两重便利。[hidden]="searchCell&&cell.indexOf(searchCell)<0"是为了配合上面的[(ngModel)]="searchCell" 实现页面的搜索功能，当searchCell输入时，cell包含上面的内容时，显示。
看下结果展示
这正是我们从服务器获取的数据，
搜索功能验证：
输入a，结果age和name都显示，id不显示，正是我们要的结果。
作者寄语：
angular2真是妙不可言，大家多多跟我交流。
网友评论