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