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

易藝 譯

，更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“華章計算機”公眾號查看。

?

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


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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。