1. 写在前面

昨天花了1天的时间把自己的博客从以前的Express换成了Angular2+Express,遂记录于此。博客Demo在这里,你也可以点击这里查看完整代码。

第一次使用Angular2,还是遇到了不少问题,比如

  1. ng-cli(1.0.0-rc.1)自动生成的项目直接跑起来报错;

  2. 采用前端路由,刷新页面出现404;

  3. 用webpack打包后端项目要注意什么;

  4. 使用Angular2时,如何为某个组件加script标签;

  5. ...

如果你也遇到了这些问题,或者你想了解一下Angular2开发的大体流程,可以接着往下看。

2. 前后端分离与SPA

先来谈谈传统的Web开发流程。在传统开发里,前端的工作可能是用HTML、CSS将页面“绘制”出来,然后用JS去处理页面里的逻辑。但由于页面中需要展示一些动态的来自数据库中的数据,所以“绘制”的内容不能在当时确实下来,于是用一些“变量”填充在HTML里,等有数据时,才用数据去替换对应的变量,得到最终的完整的页面。以上用“变量”填充HTML的过程,有可能也是由前端完成,但更多的时候其实是后端来完成的;用数据去替换变量的过程,即所谓的页面渲染一般也是在后端完成的,即所谓的后端渲染。还忘了说的一点是路由。传统意义下,页面的路由是由后端控制的,即我们每点击一个链接,跳转到哪个页面或者说接收到什么页面完全是由后端控制的。

以上是传统Web前后端搭配干活的方式,存在着一些问题。比如上面所说的用变量填充HTML的操作若交给后端去做,那么他必须先读懂前端的HTML逻辑,然后才能下手;就算把填充变量的活交给前端去做,但由于这些变量都来自后端,前端测试起来将非常困难;比如,由于填充HTML的操作是交给后端去做的,那么前端在做页面时可能是用一些写死的数据做的测试,最终将真实数据套用过来时,页面显示可能会有出入;再比如如果前端已经将页面交给后端去添加变量,若他再修改了页面,他必须告诉后端哪里做了修改,否则后端需要在修改后的页面里重新再添加一遍变量,这样之前的工作都白费了。

于是,有人提出增大前端的职责范围,把页面渲染交给前端去做,但还是在服务端完成,后端只负责提供数