1. 寫在前面

昨天花了1天的時間把自己的博客從以前的Express換成了Angular2+Express，遂記錄于此。博客Demo在這里，你也可以點擊這里查看完整代碼。

第一次使用Angular2，還是遇到了不少問題，比如

  1. ng-cli（1.0.0-rc.1）自動生成的項目直接跑起來報錯；

  2. 采用前端路由，刷新頁面出現404；

  3. 用webpack打包后端項目要注意什么；

  4. 使用Angular2時，如何為某個組件加script標簽；

  5. ...

如果你也遇到了這些問題，或者你想了解一下Angular2開發(fā)的大體流程，可以接著往下看。

2. 前后端分離與SPA

先來談談傳統的Web開發(fā)流程。在傳統開發(fā)里，前端的工作可能是用HTML、CSS將頁面“繪制”出來，然后用JS去處理頁面里的邏輯。但由于頁面中需要展示一些動態(tài)的來自數據庫中的數據，所以“繪制”的內容不能在當時確實下來，于是用一些“變量”填充在HTML里，等有數據時，才用數據去替換對應的變量，得到最終的完整的頁面。以上用“變量”填充HTML的過程，有可能也是由前端完成，但更多的時候其實是后端來完成的；用數據去替換變量的過程，即所謂的頁面渲染一般也是在后端完成的，即所謂的后端渲染。還忘了說的一點是路由。傳統意義下，頁面的路由是由后端控制的，即我們每點擊一個鏈接，跳轉到哪個頁面或者說接收到什么頁面完全是由后端控制的。

以上是傳統Web前后端搭配干活的方式，存在著一些問題。比如上面所說的用變量填充HTML的操作若交給后端去做，那么他必須先讀懂前端的HTML邏輯，然后才能下手；就算把填充變量的活交給前端去做，但由于這些變量都來自后端，前端測試起來將非常困難；比如，由于填充HTML的操作是交給后端去做的，那么前端在做頁面時可能是用一些寫死的數據做的測試，最終將真實數據套用過來時，頁面顯示可能會有出入；再比如如果前端已經將頁面交給后端去添加變量，若他再修改了頁面，他必須告訴后端哪里做了修改，否則后端需要在修改后的頁面里重新再添加一遍變量，這樣之前的工作都白費了。

于是，有人提出增大前端的職責范圍，把頁面渲染交給前端去做，但還是在服務端完成，后端只負責提供數