1. 寫在前面
昨天花了1天的時(shí)間把自己的博客從以前的Express換成了Angular2+Express，遂記錄于此。博客Demo在這里，你也可以點(diǎn)擊這里查看完整代碼。
第一次使用Angular2，還是遇到了不少問題，比如
ng-cli（1.0.0-rc.1）自動(dòng)生成的項(xiàng)目直接跑起來報(bào)錯(cuò)；
采用前端路由，刷新頁面出現(xiàn)404；
用webpack打包后端項(xiàng)目要注意什么；
使用Angular2時(shí)，如何為某個(gè)組件加script標(biāo)簽；
...
如果你也遇到了這些問題，或者你想了解一下Angular2開發(fā)的大體流程，可以接著往下看。
2. 前后端分離與SPA
先來談?wù)剛鹘y(tǒng)的Web開發(fā)流程。在傳統(tǒng)開發(fā)里，前端的工作可能是用HTML、CSS將頁面“繪制”出來，然后用JS去處理頁面里的邏輯。但由于頁面中需要展示一些動(dòng)態(tài)的來自數(shù)據(jù)庫中的數(shù)據(jù)，所以“繪制”的內(nèi)容不能在當(dāng)時(shí)確實(shí)下來，于是用一些“變量”填充在HTML里，等有數(shù)據(jù)時(shí)，才用數(shù)據(jù)去替換對應(yīng)的變量，得到最終的完整的頁面。以上用“變量”填充HTML的過程，有可能也是由前端完成，但更多的時(shí)候其實(shí)是后端來完成的；用數(shù)據(jù)去替換變量的過程，即所謂的頁面渲染一般也是在后端完成的，即所謂的后端渲染。還忘了說的一點(diǎn)是路由。傳統(tǒng)意義下，頁面的路由是由后端控制的，即我們每點(diǎn)擊一個(gè)鏈接，跳轉(zhuǎn)到哪個(gè)頁面或者說接收到什么頁面完全是由后端控制的。
以上是傳統(tǒng)Web前后端搭配干活的方式，存在著一些問題。比如上面所說的用變量填充HTML的操作若交給后端去做，那么他必須先讀懂前端的HTML邏輯，然后才能下手；就算把填充變量的活交給前端去做，但由于這些變量都來自后端，前端測試起來將非常困難；比如，由于填充HTML的操作是交給后端去做的，那么前端在做頁面時(shí)可能是用一些寫死的數(shù)據(jù)做的測試，最終將真實(shí)數(shù)據(jù)套用過來時(shí)，頁面顯示可能會有出入；再比如如果前端已經(jīng)將頁面交給后端去添加變量，若他再修改了頁面，他必須告訴后端哪里做了修改，否則后端需要在修改后的頁面里重新再添加一遍變量，這樣之前的工作都白費(fèi)了。
于是，有人提出增大前端的職責(zé)范圍，把頁面渲染交給前端去做，但還是在服務(wù)端完成，后端只負(fù)責(zé)提供數(shù)
