前 言

新時代

新挑戰

時代已經不同了！

17年前，當我的第一個作品推入市場的時候，互聯網才剛剛傳入中國。

那時候的軟件不需要聯網，每個用戶也不需要知道其他用戶的存在。

那時候只需要考慮PC運行環境，而需要考慮的屏幕分辨率也只有區區三種。

那時候的軟件項目組多則十幾人，少則一人，而發布周期常常會達到半年之久。

現在，一切都不同了。

現在，連一個手機電筒軟件都在偷偷聯網，不能聯網的游戲也已經是老古董的代名詞。

現在，軟件不但運行在PC上，還要運行在智能手機上，運行在各種Pad上，屏幕分辨率更是多到讓研發和測試工程師發怵的地步。

現在，外界看到的產品其實只是冰山一角，它背后還有很多子系統緊密協作來提供支持，需求和架構的復雜度也暴增。

但最大的挑戰恐怕還是來自發布周期—一期版本在一個月內上線已是常態，而修復bug的時間限制則往往以小時計，甚至以分鐘計。

沒錯，這些都是新的挑戰！好在，我們也有了新技術！

新技術

這17年間，軟件業最大的技術革命，當然首推互聯網。

互聯網不但拓展了軟件業的業務范圍，更改變了程序員獲取知識和解決問題的方式。

如今，一個不會Google（以及翻墻），沒上過GitHub，不知道Stackoverflow的程序員很難想象會有什么發展空間。

排在第二位的技術革命，當推移動互聯網以及智能終端。這場革命不但把曾經的王者諾基亞打落凡塵，而且讓蘋果重新登上王位。

這兩場技術革命讓開源運動遍地開花，更催生了無數的新技術。

且不提HTTP/HTML/JavaScript/CSS這些耳熟能詳的互聯網基石，就連在互聯網革命爆發之前已經就已經相當成熟的OO領域也有了很大的進展。

以MVC為例，它不但衍生出MVP、MVVM等很多變種，而且從后端領域擴展到了前端領域。而現在日益火爆的Angular，正是MVC在前端領域的代表作之一。

一個“極客”總是癡迷于各種“漂亮”的技術，而Angular當之無愧地是其中之一，它可供借鑒的地方很多：

? 如何彌補語言的先天不足。

? 如何干凈漂亮地解耦。

? 如何設計“小而美”的類/代碼塊。

所以，即使你還沒有下決心把Angular應用到項目中，也可以在學習Angular的過程中獲得一些啟迪，幫助你重構現有項目。

面對技術的快速進步，有人會感到恐慌，有人會盲目地追蹤一切新技術，而真正的極客會看到“新”技術中那些“不變”的元素，會在“新挑戰”中看到“新機遇”，并且把握。

新機遇

一方面出現了前所未有的挑戰，另一方面出現了前所未有的技術，這樣的機遇并不多，“極客”們歡呼雀躍。

對于公司，它將影響產品形態、開發速度和產品品質，也會對團隊的組織架構帶來改變。比如，伴隨著設備的多樣化，網絡服務的訪問入口變得多樣化：不但需要有供電腦訪問的網站，還需要供手機訪問的網站、供Pad訪問的網站，對于一些追求極致用戶體驗的公司來說，還會提供給安卓設備用的App、給蘋果設備用的App。

作為開發人員，也許你會看到或正在經歷一個工作量暴增的時代，但是，不要緊張，事情沒那么壞。在新時代，有一項重要且迅速成長的技術革新，那就是“前后端分離架構”，它可以有效遏制工作量的暴增。“前后端分離架構”正是伴隨著“前端MVC”的成長而成長的。

它的原理很簡單：雖然多出了很多訪問入口，但是其背后的業務邏輯并沒有本質性變化，那么，我們是否可以讓這一套業務邏輯為多種不同形態的終端服務呢？答案是肯定的，那就是讓后端只提供跟業務邏輯緊密相關的那部分API，而用戶交互等非核心邏輯則交給前端程序來完成。

這樣，我們的工作量并不會成倍增長，而是可以先著重開發一個版本，讓后端API和一種形態的前端應用變得成熟，然后再去開發其他形態的前端應用。而這些其他形態的前端程序的工作量和風險都比較容易得到控制。

但是，根據康威定律，在新的程序架構下，項目的組織架構甚至整個公司的組織架構都將發生相應的變化，而最顯著的變化就是出現了專門的前端工程師。前端工程師往往不是零基礎開始的，一小部分來自原來負責切圖或寫JavaScript特效的工程師，不過大部分是從以前開發Web應用的程序員轉型而來的。

無論對于公司還是個人，“前端MVC”以及相應的“前后端分離架構”都是一個新的機遇。不思進取的王者終會沒落，勤奮好學的新星將會崛起，希望本書能有幸成為你的助力。

致讀者

寫給想轉職或兼修前端的Web工程師

本書面向的讀者，第一大群體是Web工程師。“前后端分離架構”出現之前，在大多數Web應用中，無論是核心的業務邏輯，還是表現層的交互邏輯，都是完全運行在服務端的。寫這類程序的程序員就是這里所說的Web工程師。

隨著“前后端分離架構”的普及，原來的開發方式將主動或被迫轉變。本書將通過實例引導你完成到“前后端分離架構”的思維轉變，以及與此相關的技術。

如果你是個Web工程師，在讀本書的時候請留意用戶交互邏輯是如何完全移交給前端程序的，而后端程序又做了哪些精簡，特別要注意體會模塊職責的單一化、專業化趨勢。

對于部分轉職過來的Web工程師，除了轉換思維以外，還有一大挑戰是前端龐雜的知識體系：HTML/CSS/JavaScript/前端工具鏈/瀏覽器兼容性等，每一個領域都相當龐大。

在本書中，我們無法對此展開講解，但這些知識對于做實際項目又是必需的。所以，我們只能在附錄中提供一些重要的技術要點和“坑”，并且給出一些在線學習資源和書單。這些大部分都是從我們開展培訓時所使用的課件改編而來的，具有很強的實戰性、實用性。希望可以為你提供一些第三方資料，作為進一步學習的起點。

寫給想進階為專業前端的切圖師

在很多開發組中，切圖師往往由初級程序員或美工擔任，有沒有想過自己將來向哪里發展？除了面向對象、項目管理等必學的基礎技能之外，還可以學習數據庫、后端框架、安全技術等，轉職為后端工程師。也可以學習HTML/CSS/JavaScript、用戶體驗、交互設計、前端框架等，轉職為前端工程師。

當然，如果你足夠聰明和有足夠的進取心，你也可以兩者兼修，成為一名全棧工程師。不過，相對來說，前端這條路徑可能更加平緩。而且，這幾年前端職位正逐漸火爆，從個人職業發展來說，這也是個不錯的選擇，過一段時間后未必再有這樣好的機遇。從切圖師到前端，這條路并非荊棘重重。事實上，沒有傳統Web工程師的思維定勢，這反倒會是個優點。在筆者的編程、咨詢和教學過程中，曾接觸過一些對Angular感興趣的人，總體上說，轉變思維比導入新思維的難度更大。圈子里還常流傳一些無稽之談，比如，Angular是Google開發的，面向的是Google中那些妖怪級程序員。那都是亂傳的，沒那么恐怖。

我寫下這些，是希望你們可以輕裝上陣，Angular的很多設計都是遵循“最小意外”原則的，靠直覺就可以掌握，“高估難度”有害無益。

不過，難度仍然是有的。讀本書之前，你至少應該已經熟悉了JavaScript語法，對Angular的各種概念有了大致的了解。如果你對很多新名詞不知所云，那么建議先去翻閱一下附錄中的書籍，瀏覽一下網上關于Angular入門的文章。

對于切圖師來說，MVC方面的基礎往往會成為短板，而JavaScript中一些詭異的特性也常常帶來困擾。所以，本書會穿插一些這方面的簡短知識。但是，對于一個立志成為“極客”的初級程序員來說，這仍然是不夠的，所以，在附錄中我們還提供了一些網址和書單，希望本書能幫你開啟職業生涯的新階段。

2.0要來了，本書會過時嗎？

Angular 2.x已經進入了Alpha測試階段，那么，不免有人擔心，等到2.x推出的時候，本書會過時嗎？從實現細節上來講，會的。從思想上來講，不會。從實用性上來講，不會。

1.x和預計2016年推出的2.x在語法甚至一些底層實現上是截然不同的。

據目前得到的消息，2.x將使用TypeScript和ES6作為主體語言，那時候，本書的很多代碼將不再適用于2.x。而由于2.x徹底拋棄了IE11之前的低版本瀏覽器，它可以借助最新的瀏覽器特性進行底層實現，不用為了向后兼容而使用“臟檢查”等技術來彌補瀏覽器的不足。在這些細節上，1.x和2.x幾乎沒有共通之處。這一點一直被人詬病，也是一些人對Angular的前途深表擔憂的原因。不過，從另一個角度來看，2.x的這種改進也是一種勇敢的改革，可以讓它輕裝前進，更有利于長遠發展。

好消息是，2.x不是1.x的替代品。官方已經宣布，即使2.x推出，也仍然會對1.x進行長期維護。這就有點類似于Query 2.x不再兼容IE8，而Query 1.x仍然兼容IE8并繼續向前發展一樣。這種版本策略可以防止Angular背上向老舊瀏覽器兼容的包袱。

1.x和2.x在編程模型上并沒有太大的差異，它們都基于MVVM模型，都具有雙向綁定功能（即使底層實現方式已經變了），都具有相同的設計哲學—利用高內聚的小模塊組合出最終程序。而這些在我們的書中都有所體現。在目錄結構、指令的分類等方面，本書也從2.x中引入了很多更好的實踐。

從實用性上來說，本書更不會過時。2.x的瀏覽器兼容性起點就是IE11，這不是因為細節層面的問題，而是從底層原理上就不可能—它依賴太多的新特性。而在國內市場上，徹底拋棄IE11以下的版本恐怕還會是一個長期的歷程—即使最樂觀的估計，至少也需要兩年。當然，手機端的瀏覽器版本更新要快得多，所以，預計2.x最早會被用在手機版上。

固然，2.x是個高大上的版本，但目前在國內還是個屠龍之術。如果要在現實中使用，還是先學好1.x吧。按照本書的指引，你可以提前領略2.x的優點，而不用付出兼容性的代價。當然，等本書的2.x版推出時，這種熟悉的味道也會讓你有一個更高的起點。

閱讀指南

Angular的學習曲線大概是這樣的：入門非常容易，中級的時候會發現需要深入理解很多概念，高級的時候需要掌握Angular的工作原理，而想成為專家則很難，需要經過很多工程實踐的磨練。

本書的主體結構也是針對這樣的學習曲線設計的。

首先，初級階段，實戰演練

我們會帶你在實戰中逐步體驗Angular的開發過程，并隨著進度的推進，逐步引入所需的技術和概念。

然后，中級階段，概念介紹

在實戰中提到的一些概念不會就地展開，而是只做簡介，到了這個階段，會對概念進行深入講解：是什么，為什么，怎么用，什么時候用，什么時候不用等。

接下來，高級階段，工作原理

學習了這些概念，我們還要把它們串起來，向你揭示Angular的工作原理，看看這些概念之間是如何協作的。

最后，專家階段：最佳實踐，技巧

前面主要是入門和理論，而這部分將主要以實戰經驗為主。

只把Angular用熟了是不夠的，我們還要把它整合進更宏觀的開發過程中，不但要考慮開發，更要考慮維護。我們要如何開發容易維護的Angular程序？請看第4章。

專家還需要掌握一些技巧去把復雜問題簡單化，發掘一些不常用但很有用的API，把看起來平淡無奇的框架特性運用得出神入化，第5章將集中展現這一點。

坑

在前面的章節中零零散散提到了一些需要注意的地方，但是這樣不方便查閱，所以我們把需要注意的地方作為獨立的一大章，把我們幫別人解決過的一些典型問題收集在一起。當然，我們也會在讀者社區繼續維護并更新這些“坑”，而不是等再版時才發布。我們希望能把這本書做成“活的”，讓這本書更加物超所值，不辜負讀者對我們的信任。

工具

工欲善其事，必先利其器。充分發揮工具的力量是開發人員的重要素質，日常用到的工具你真的用熟練了嗎？有沒有更好的工具？我們會把實戰中覺得對自己幫助最大的工具及其使用經驗分享給你。

更多

在實戰中，有很多需求是不顯眼但很重要的，比如SEO、訪問統計等，在實際項目中，這些往往是不能忽視的。我們會專門通過一章來講解如何結合Angular和第三方軟件干凈漂亮地解決這些問題。

Hybrid應用和手機Web越來越普及，手機版開發的需求也越來越高，在Angular的基礎上，開發手機版變得容易多了。而且，也已經有了比較成熟的工具和框架，我們會簡要講解一下手機版開發的方法和框架。

附錄

軟件開發需要很多綜合技能，但本書容量有限，我們也不可能是每個領域的專家。因此，我們會“授人以漁”，給出一些在線資源和書單，供大家深入學習或作為備查資料。

關于隨書代碼

書中所摘錄的只是全部代碼的一小部分，大部分代碼都放在了GitHub上。地址是https://github.com/ng-nice/code。

如果你查看GitHub歷史，會發現總的提交數并不多。這是因為要方便教學，所以在提交前進行了合并。所保留的這些提交大都和書中的主要進度有關，略去了細節提交。所以，本書中代碼的提交粒度不能代表實際項目中的提交粒度，在實際項目中，其提交粒度通常比本書中所示范的更小。閱讀代碼時請記住這一點，以免養成“大粒度提交”的壞習慣。

另外，文中的JavaScript代碼（包括摘引的Angular源碼）全都使用了兩格縮進模式，這主要是考慮到圖書排版問題，希望少一些不必要的換行。你們在現實項目中愿意用兩格或四格均可，只要項目組內保持一致即可。

關于內容的重復

仔細閱讀，可能會發現有些內容會在多個不同的章節中重復講解，這當然不是湊字數，而是盡可能符合人的記憶規律—把重要的內容在不同的場景下重復，對于深入掌握重點是很有幫助的。

關于寫作風格

這是一本多人協作的書，雖然我們進行了后期統稿，但在語言風格等方面仍難免會有不一致的地方，我們期待你們的反饋，以便將來改進。

你的好，我永遠記得！

雙狼的感恩

雙狼的本次合作起于機械工業出版社編輯吳怡的邀請。作為ThoughtWorks的Tech Lead，雙狼都有很多工作任務，原定6個月的寫書計劃，被拖到了8個月，感謝吳怡的耐心與推動。

還有很多ThoughtWorker為本書做出了貢獻：

? 張逸，資深ThoughtWorker，很多技術書籍的作者或譯者。一直在鼓勵我們，并給了我們很多幫助。

? 彭洪偉，本書的第三作者。在交稿壓力最大的時候，承擔了“工具”篇的撰寫工作，保障了本書的盡早交稿。

? 陳嘉，幕后的貢獻者，全棧式工程師。幫我們設計了“雙狼說”微信公眾號的Logo，從技術的角度幫我們審稿，并提了一些非常有用的建議。

還有很多ThoughtWorker和社區朋友幫助我們從技術層面和語言層面進行修改。他們有的是Angular專家，有的是新手，給了我們比較全面的反饋。能將枯燥、乏味的技術平易近人地展現在這本書中，一定要感謝他們所作出的奉獻。他們是（排名不分先后）：馮爾東、朱本威、李科偉、楊琛、彭琰、葉志敏、ng群as。

還要感謝Angular中文社區QQ群和關注“雙狼說”微信號的網友們，是你們的鼓勵給了我們寫作的信心和動力！

雪狼的感恩

開始寫書的時候，剛剛認識我的女友娜娜，今天，我們即將走進婚姻的殿堂。我這樣一個負情商的程序員，生活有多么枯燥乏味，不問可知。感謝你點亮了我的人生。你的好，我永遠記得！

能專注開發17年，要感謝我父母和弟弟的支持。人到中年，本應是最糾結的時代，特別是我這樣的前“單身狗”。我無法經常回家，是弟弟經常回去探望父母。父母的樂觀與健康，讓我可以心無旁騖地工作。你們的好，我永遠記得！

能走入軟件開發這一行，要感謝我的伯樂何戰濤和王勇的幫助。還記得那個沉默而不自信的“小汪”嗎？當初，他什么也不會，犯過很多錯誤；如今，他在盡力為別人的職業生涯提供幫助。你們的好，我永遠記得！

在這17年間，我嘗試過很多角色，從寫文檔、測試到小公司的CTO，走過了豐富多彩的人生。特別需要感謝的是林先生和余姐等前同事，我們追隨林先生走過8年創業之旅，這一過程讓我具備了更開闊的視野和更堅韌的性格。雖然因為生活壓力不得不離開，但，你們的好，我永遠記得！

最后，感謝ThoughtWorks！作為“敏捷”的倡導者，ThoughtWorks處處體現著敏捷思想，這是一個把“敏捷”變成“文化”并滲透到骨子里的公司。這是一個很“奇葩”的公司。這一點從“全球CEO和中國區程序員撞衫”事件就可見一斑。這是一個很“簡單”的公司。引用我們一位HR的說法：“進了ThoughtWorks，我感覺自己的情商都下降了！”這是一個很“技術”的公司。每年兩期的技術雷達都來自全球近3000名工程師的實踐總結。這里幾乎會涉足每一項前沿技術：大數據、React、Scala等。僅以Angular為例，我們在工程實踐中使用它是在4年前，那時候Angular還是0.6版呢。

還差一句話就變成招聘軟文了，索性補上吧：ThoughtWorks，你的好，進來才知道！

破狼的感恩

在寫作本書之際，我作為ThoughtWorks高級敏捷咨詢師、架構師，因為項目曾輾轉多地，沒有太多時間投入到這次的寫作之中。在此之前，已經有很多的出版社聯系我寫本國人自己的深度解析Angular的書籍，但都被我婉言拒絕了。直到雪狼告訴我他希望寫一本關于Angular的書籍的時候，恰巧吳怡編輯也跟我提起了寫書的事。這次我們應承下來了。在這里首先感謝吳怡的知遇之情和寫書過程之中的包容與耐心。還有雪狼大叔的最終推動。

我是一個具有承諾“強迫癥”的人，一旦應承下來的事情，我就會盡自己最大的努力把它做好。特別在快截稿的幾個月里，每天寫作到凌晨1～2點，次日還需要準備與客戶7∶00的站會。和老婆結婚已經一年多了，可是由于工作原因，我也出差在外一年多了。加上寫作此書的時候，連陪伴父母和老婆的時間也被我擠出來寫作本書了。所以在此，首先要感謝我的父母和老婆，感謝你們的支持和包容，在這本書的背后也包含著你們對我的一份寶貴的愛。爸媽、老婆：我也愛你們！

還要感謝我大學的導師劉繼光老師和柳翠寅老師，是你們讓我學到了軟件開發的技能，以及幫我尋找到一份實習的機會，給了我比別人多3年的實戰機會，因此我才能獨自闖蕩成都這座大城市，并開始了軟件開發之路。還有你們對知識的追求和堅強的毅力，深深感染了我。至此堅持了6年多的博客寫作和回饋開源社區，因此才有了本書的順利完成。你們是我一輩子的良師益友，謝謝你們的付出！

同時還要感謝我在ThoughtWorks的同事們。是我的Sponsor張逸一直鼓勵我寫書，是熊節每年的閱讀數量激勵我更加堅定地持續獲取更多的知識來武裝自己。還有很多的twer，同樣在這里感謝你們長久以來對我的幫助和鼓勵。

我常常告訴自己：要么讀書，要么旅行，身體和心靈總有一個在路上。與君共勉。

彭洪偉的感恩

首先，我要感謝我父母！即使是在家境最困難的時候，他們也時時刻刻鼓勵我、支持我，讓我能堅持走自己的路。

我第一次接觸到計算機是在2003年。那時剛上初中，正是CS和傳奇火爆的時候，想自己申請一個QQ號都感覺很困難。直到2006年初中畢業，莫名其妙地開始了信息學奧林匹克競賽的培訓之路，用C語言寫出了人生的第一行Hello World代碼。

感謝張宗弋老師的悉心教導和高中三年對C語言、算法、圖論、數論的培訓，還記得大家都叫您小弋（誤讀作：Ge）子。是您激發了我的“程序員夢”。以至于后來在報志愿的時候，第一志愿寫的都是計算機信息科學與技術，雖然那時候并不知道這個專業是干什么的。

在大學里，特別要感謝的是鄧芳老師，是您鼓勵我們，除了學好課堂上的東西，更要積極去探索自己感興趣的東西。您“授人以魚，不如授人以漁”的教學思想，讓我逐漸養成了自學的習慣，至今讓我受益匪淺。后來，您幫我引薦了兩位讓我受益良多的導師：陳宇副教授和王海軍副教授。是他們把我帶到了物聯網的領域，讓我對計算機的領域產生了更濃厚的興趣。三位老師的指引，讓我接觸到了更多課堂上沒有的東西，終于有幸加入ThoughtWorks這個大家庭中。

在這里，我認識了有黑客范兒的馬偉和段子手Jojo（周哲武），是他們給了我建設性的意見，讓我感覺到了ThoughtWorks 的不同。不得不提的還有Jojo幫我推薦的Sponsor—破狼，是他不斷地在開源的世界里給我指出新機會，鼓勵我大膽嘗試。不然我也不能堅持翻譯完Scala構建工具SBT：http://www.scala-sbt.org/0.13/tutorial/zh-cn/index.html的使用文檔。如果沒有破狼的引薦，我也不會認識前端牛人雪狼和參與本書的編寫。

最后，如果沒有未婚妻韓盼盼的愛、支持與鼓勵，我也難以完成這么多富有挑戰性的工作。謝謝，我愛你！