本節書摘來自華章出版社《Angular從零到一》一書中作者Richard Banfield 著

易藝 譯

，更多章節內容可以訪問云棲社區“華章計算機”公眾號查看。

?

前　　言 一個大叔碼農的Angular 2創世紀 作為一個出生于20世紀70年代的大叔，我在軟件這個領域已經摸爬滾打了16年，從程序員、項目經理、產品經理，項目總監，到部門管理等各個角色都體驗過，深深地了解到這個行業發展的速度之快是其他行業無法比擬的：從編程語言、各種平臺、各種框架、設計模式到各類開源工具、組件林林總總，要學習的東西實在太多，因為變化太快。 但萬變不離其宗，名詞變化雖多，透射的本質其實是趨同的：那就是程序員受不了代碼的折磨，千方百計地想讓這個工作更簡單，更能應對變化。比如說，面向對象編程（Object-Oriented Programming）理念的提出其實是犧牲了部分性能換來代碼層次結構的清晰，因此也催生了C++、Java、C#等一系列優秀的面向對象編程語言；后來程序員們發現在實際的編程邏輯中，往往不是像對象樹那樣可以劃分得那么清楚。還有一些類似安全、日志等功能其實是撒在系統各個角落的，于是，面向切面的編程（Aspect-Oriented Programming）應運而生。再后來一部分科學家發現現有的編程語言做分析或數據計算實在太麻煩，明明要計算的邏輯很清晰，卻要用一大堆的對象封裝賦值，函數式編程（Functional Programming）便出現了。最近幾年被產品經理逼瘋的程序員認為強類型語言改動起來太慢太繁瑣，于是動態腳本類語言大行其道。 仔細分析一下，這些語言不是互斥的，其實好的元素都是會被慢慢吸收到各自的語言、平臺上面去的。比如C#、Java也采納了函數式編程的一些特點，像Lamda表達式；再比如.NET和Java平臺基礎上也擁有動態腳本語言，像.NET平臺上的IronRuby，Java平臺上的Scala等。本書寫的Angular 2就是在JavaScript這種腳本語言基礎上引入了TypeScript，進而可以兼具面向對象編程和強類型語言的優點；引入了依賴性注入（Dependency Injection）這種在強類型語言中被證明非常有用的設計模式；通過引入Rx，讓JavaScript擁有了函數式編程的能力。 寫這本書的起因很偶然。我們團隊以Android和iOS開發人員為主，前端開發人員只有一個。但在開發過程中我們體會到原生App的開發迭代速度比較慢，因此希望以前端開發快速迭代，邏輯和界面摸清楚后再進行App開發。我們決定走前端路線后，就開始挑選前端框架，React、Vue和Angular 2我們都嘗試了，最終選擇Angular 2是因為谷歌在Angular 2中把多年Android開發積累的優秀思想帶入了Angular，使得Angular的開發模式太像App開發了。有App開發經驗或者Java、.NET開發經驗的人可以非常舒服地切入進去。有了選擇，我就開始邊學習邊給開發小伙伴做培訓，培訓資料也就當成網文發表出來。沒想到在網上得到很多網友的支持和鼓勵，覺得我邊學邊寫時對一些問題的思考過程和改進過程對大家的學習也很有幫助。而我也在與大家的互動和分享中糾正了對一些概念和模式的認識。互動和分享是最好的學習方式，這也是本書區別于其他“專門教程”的重要一點，我們是一起在學習，一起在思考的。特別感謝簡書和掘金等平臺的讀者，幫我糾正了很多錯誤認識和筆誤等。機械工業出版社的吳怡編輯也正是在網上看到我的文章后，鼓勵我結集出書，給我提了很多中肯意見，最終才有此書，非常感謝。 本書分為9章，第1～7章中我們從無到有地搭建了一個待辦事項應用，但是我們增加了一些需求：多用戶和HTTP后臺。這樣待辦事項這個應用就變得麻雀雖小五臟俱全。通過這樣一個應用的開發，我們熟悉了大部分重要的Angular 2概念和實踐操作。建議讀者按順序閱讀和實踐。閱讀完第7章，基本可以在正式的開發工作中上手了。第8章介紹了響應式編程的概念和Rx在Angular中的應用，可以說，如果不使用Rx，Angular 2的威力就折半了，很多原來需要復雜邏輯處理的地方用Rx解決起來非常方便。由于Rx本身的學習曲線較陡，我們花了很大篇幅做細致的講解。第9章是在第8章基礎之上，引入了在React中非常流行的Redux狀態管理機制，這種機制的引入可以讓代碼和邏輯隔離得更好，在團隊工作中強烈建議采用這種方案。第8章和第9章由于學習門檻較高，有的讀者可能暫時接受起來有困難，遇到這種情況可以先放下，等到使用Angular一段時間后再回頭來看。 大家在閱讀過程中可能會發現從第3章開始起，我們在不斷地打磨待辦事項這個應用的邏輯，持續地優化。我寫這本書其實不僅是為了讓大家入門Angular（類似的書太多了，不需要我再寫一本），更多的是想把自己琢磨這些問題、解決這些問題的過程和邏輯與大家分享，把一些好的設計模式和思想介紹給大家，這些模式和思想遠比一個框架更有生命力。 本書適合有面向對象編程基礎的、掌握一門現代編程語言的讀者閱讀。如果有Java、C#、Objective-C等強類型語言背景，對于本書中介紹的Angular各種元數據修飾符接受程度會很高，對于TypeScript的類型等也會一點就透。如果有JavaScript背景，理解TypeScript語法是無障礙的，但強類型的約束和修飾符等概念需要仔細體會。如果使用過Spring Framework或者Dagger2等IoC框架，那么對依賴性注入的概念就再熟悉不過了。 建議學習的同時或之后可以比較一些其他主流前端框架，比如React或Vue，參照后你會發現很多功能其實異曲同工。在讀本書的過程中如果發現有錯誤，希望你可以在書籍源碼的Github地址（https://github.com/wpcfan/awesome-tutorials）上提問題，我們一起打造一本一直在生長的書。希望年輕的你和大叔的我一起學習，一起面對這個迅速成長的行業！
王芃 2017年2月11日


目　　錄 前　言 第1章　認識Angular ? 1.1　Angular 2簡介 ? 1.2　環境配置要求 ? 1.3　第一個小應用 Hello Angular ? 1.4　第一個組件 ? 1.5　一些基礎概念 ? 1.6　引導過程 ? 1.7　代碼的使用和安裝 ? 第2章　用Form表單做一個登錄控件 ? 2.1　對于login組件的小改造 ? 2.2　建立一個服務完成業務邏輯 ? 2.3　雙向數據綁定 ? 2.4　表單數據的驗證 ? 2.5　驗證結果的樣式自定義 ? 2.6　組件樣式 ? 2.7　小練習 ? 第3章　建立一個待辦事項應用 ? 3.1　建立routing的步驟 ? 3.2　讓待辦事項變得有意義 ? 3.3　建立模擬Web服務和異步操作 ? 3.4　小練習 ? 第4章　進化！將應用模塊化 ?59 4.1　一個復雜組件的分拆 ?59 4.1.1　輸入和輸出屬性 ?62 4.1.2　CSS樣式的一點小說明 ?70 4.1.3　控制視圖的封裝模式 ?72 4.2　封裝成獨立模塊 ?72 4.3　更真實的Web服務 ?76 4.4　完善Todo應用 ?78 4.5　填坑，完成漏掉的功能 ?82 4.5.1　用路由參數傳遞數據 ?82 4.5.2　批量修改和批量刪除 ?86 4.6　小練習 ?90 第5章　多用戶版本應用 ?91 5.1　數據驅動開發 ?91 5.2　驗證用戶賬戶的流程 ?96 5.2.1　核心模塊 ?97 5.2.2　路由守衛 ?98 5.3　路由模塊化 ?105 5.4　路由的惰性加載——異步路由 ?106 5.5　子路由 ?108 5.6　用VSCode進行調試 ?112 5.7　小練習 ?116 第6章　使用第三方樣式庫及 模塊優化 ?117 6.1　生產環境初體驗 ?117 6.2　更新angular-cli的方法 ?120 6.3　第三方樣式庫 ?121 6.4　第三方JavaScript類庫的集成方法 ?125 6.5　模塊優化 ?132 6.6　多個不同組件間的通信 ?134 6.7　方便的管道 ?140 6.7.1　自定義一個管道 ?142 6.7.2　內建管道的種類 ?143 6.8　指令 ?145 6.9　小練習 ?148 第7章　給組件帶來活力 ?149 7.1　更炫的登錄頁 ?149 7.1.1　響應式的CSS框架 ?149 7.1.2　尋找免費的圖片源 ?153 7.2　自帶動畫技能的Angular 2 ?157 7.3　Angular 2動畫再體驗 ?159 7.3.1　state和transition ?159 7.3.2　奇妙的animate函數 ?164 7.3.3　關鍵幀 ?166 7.4　完成遺失已久的注冊功能 ?168 7.5　響應式表單 ?173 7.5.1　表單控件和表單組 ?176 7.5.2　表單提交 ?179 7.5.3　表單驗證 ?179 7.5.4　表單構造器 ?181 7.5.5　Restful API的實驗 ?182 7.6　Angular 2的組件生命周期 ?185 7.7　小練習 ?187 第8章　Rx——隱藏在Angular中的利劍 ?188 8.1　Rx再體驗 ?190 8.2　常見操作 ?194 8.2.1　合并類操作符 ?195 8.2.2　創建類操作符 ?203 8.2.3　過濾類操作符 ?208 8.2.4　Subject ?210 8.3　Angular 2中的內建支持 ?211 8.3.1　Async管道 ?214 8.3.2　Rx版本的Todo ?216 8.4　小練習 ?223 第9章　用Redux管理Angular應用 ?224 9.1　什么是Redux ?224 9.1.1　Store ?225 9.1.2　Reducer ?225 9.1.3　Action ?226 9.2　為什么要在Angular中使用 ?227 9.3　如何使用Redux ?231 9.3.1　簡單內存版 ?231 9.3.2　時光機器調試器 ?239 9.3.3　帶HTTP后臺服務的版本 ?242 9.3.4　一點小思考 ?247 9.3.5　用戶登錄和注冊的改造 ?248 9.4　小練習 ?256 9.5　小結 ?256

總結

以上是生活随笔為你收集整理的《Angular从零到一》导读的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。