整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者｜Tobias Merkle
譯者｜無明
判斷一個公司是否開始走下坡路，最可靠的一個方法是看看隨著時間推移，它的產品所提供的效用的變化情況。蘋果公司在發布 iPhone 時，它的平均產品效用大幅上升，這種趨勢持續了一段時間，但當他們開始取消 3.5mm 耳機插孔等重要功能時，這種趨勢進入了一種穩定狀態。一般來說，大多數公司都會經歷這種效用的 S 曲線或拋物線曲線：前者通常會找到自己的利基市場，并且在沒有創新的情況下獲得豐厚的利潤，而后者設法將事情搞砸，讓自己的產品陷入混亂。
Angular——慢慢念出這個單詞，你會感覺喉嚨都會因為這個單詞的可怕的形狀而發生扭曲，這種形狀代表了丑陋、尖銳和虛偽。
將這三個單詞與它們的形狀相對應時，你會看到 Angular 是多么扭曲
在這篇文章里，我將告訴大家，這個惡魔是如何給我的心靈帶來各種不同的創傷的。這個惡魔就是谷歌的心血結晶：Angular。
文 檔
你是否也有過類似的經歷：你有一個很好的想法，想要把它作為周末項目，你從周六下午開始，然后意識到這個項目至少需要六個月才能完全實現？在谷歌對 Angular 內部工作進行文檔化時就經歷了這樣的時刻。他們把這個工作交給了一個實習生，這個實習生在喝了幾個禮拜的濃縮咖啡后，終于搞出了一個 Hello World 代碼，并把它作為完整的項目文檔。
但這個文檔并沒有列出任何在使用 Angular 構建 Web 項目時可能會遇到的錯誤。實際上，你需要的設計模式或核心概念很少出現在這個文檔中。如果你想要學會如何使用 Angular 構建一個工具，不得不去購買在線課程，而這些課程會告訴你所有的真相。如果你天真地以為，你可以像 React 或 Vue 開發人員那樣，馬上就可以開始編寫簡單的 JavaScript，那就大錯特錯了！
Angular 的文檔看起來更像是一個函數，我可以使用下面的偽代碼來表示。
有沒有發現，在修復錯誤時，你必須將搜索關鍵字中的“angularjs”排除掉，你不能指望使用“Angular”就可以排除掉這個框架的第一個版本的內容。
接下來，在你閱讀了足夠多的 Stack Overflow“解決方案”之后，你開始意識到，在你的代碼和運行在瀏覽器上的代碼之間，不僅存在被編譯器破壞的 CSS，當中還有一個黑盒，要求你以某種方式格式化你的應用程序，否則整個項目就會失敗，或者更糟糕的是，出現不正確的錯誤信息。當 Angular 告訴你你做錯了什么，你卻不敢相信了，因為它甚至都不知道它自己的系統是如何工作的。
Angular 的開發體驗就是這樣的。你先是全速向前沖，在撞了幾次墻之后，你學會以蝸牛的速度爬行，慢慢摸索這個框架可能拋出的任何問題。在這個世界上，沒有什么比試圖操作這個世界上據稱最聰明的公司排泄出的這個可怕和喜怒無常的裝置更令人沮喪的了。
請想象一下一輛不能打開引擎蓋且只有一個儀表盤的汽車。要是汽車壞了都沒辦法修理，只能換新。汽車在沒有啟動的情況下也會往外噴氣。廠家也不提供服務手冊。如果你想知道它的工作原理，這里有一本 5,280 頁的裝配指南，拿去吧，祝好運！
架 構
Angular 開發效率很低，開發一個應用程序需要很長時間，而一旦你的應用程序變得比“Hello World”更復雜時，開發速度就會變得更慢。如果 Angular 能夠為用戶或程序員帶來更多好處，例如在發生運行時錯誤時正常退出，或者更快的編譯速度，或者提高應用程序安全性的，這些都是可接受的。但 Angular 并沒有這么做。事實上，只要一提到“Uncaught TypeError”，開發者們就會崩潰成堆。
基本上，想要知道 Angular 在做什么，唯一方法是閱讀 Angular 開發人員在 GitHub 上提供的數百萬行源代碼。因為沒有人會去這么做，所以 Angular 勉強提供了一兩種設計模式用來構建完整的應用程序。你唯一的另一個選擇就是讓自己沉浸在學習 Angular“工作原理”的狂熱之中。
我可以告訴你它的工作原理。組件與服務通信，通過應用程序導入的模塊將數據中繼到其他注入組件中。還有什么不清楚的？如果你需要進一步的解釋，請參考 Material Design 指南。它為你提供了所有必要的組件，而且請務必保證你的設計是像素完美的。這應該很容易吧，因為 Material 和 Angular 都是由谷歌設計的，它們應該可以很好地協同工作。當列表項的填充占據了網頁的三分之一，并且打開下拉菜單需要十六秒，這種感覺很棒吧？
Angular 的設計沒有哪一部分是為了讓你的代碼運行得更快。它只帶來了三個東西：膨脹的復雜性、完成一個簡單功能需要更長的時間，以及為你和團隊提供更好的工作保障（如果你們能夠日復一日地寫出意大利面代碼而不會發瘋）。
Angular 的 Web 開發體驗
打開你的 IDE，輸入 IntelliJ IDEA 許可密鑰，選擇用于“Lint”你的 TypeScript 代碼的“Linter”類型。Angular 使用的是 TypeScript，也就是帶有類型的 JavaScript。看到了嗎，你必須使用與 TypeScript 兼容的 IDE。TypeScript 會出新版本，會破壞你現有的代碼和依賴項中的代碼，這是預料之中的，而這就是生活！
如果你的依賴庫對你從未使用的類的某個屬性做了修改，造成了重大變更，請不要驚慌。你只需要為每個構建過程添加手動文件編輯步驟即可，或者，你也可以停留在某個兼容版本，并放棄所有未來可能出現的改進。感謝你選擇 TypeScript 和 Angular。
Angular 可以幫你將假的 HTML 元素混合到真實的 HTML 元素中，他們用冒名頂替的東西污染了真正的規范。在創建 HTML 文件域時，請記得使用 Angular 的標記語言，其中包含的指令會讓你的代碼在調試時變得更加違和。你甚至可以編寫自己的指令。所有這些高級的 Angular 風格的 HTML 都讓跟蹤源錯誤變得比任何其他庫、框架或編碼環境都要難。它們會向你提供不正確的錯誤消息。在花了數天時間查找是否遺漏了某個標簽的結束標記之后，你才意識到錯誤實際上隱藏在條件和神秘的導入指令深處的某個地方。
此外，你還有足夠的時間考慮是否繼續使用這個漂亮的框架，因為每次你修改了任何一小部分 HTML 都需要重新編譯整個應用程序。熱加載只是個嬰兒玩具，對于應用程序中稍微復雜一點的東西，你都需要等上 60 到 300 秒，哪怕是在一個彈出窗口中為某個元素添加一個 HTML 類。你的很多時間消失在虛空之中。你的很多時間花在查看控制臺的消息：“92% chunk asset optimization”上。
被谷歌的悲觀編程思維奴役一年之后
Angular 讓我成為一個更好的程序員，因為它教會了我如何在站在火山口的同時還能開發出可運行的應用程序。我所做的任何事情都需要走一大段彎路，它們比將數據對象 A 粘附到顯示元素 B 的最簡單的解決方案要復雜得多。你的 Angular 應用程序中的任何一個錯誤都將導致其余部分出現意外的行為。我們最終實現了一個系統，應用程序會在每次發現未捕獲的錯誤時重新加載頁面，因為這樣最簡單不過了，不需要去判斷這個錯誤是 Angular 本身的錯誤還是因為其他錯誤導致的。
Angular 知識將在我的余生與我如影隨形，我根本沒有辦法擺脫它，它就像強力膠一樣粘在我的身上，就像天然乳膠一樣徹底堵塞了我的腦洞。如果我要養活家人，我別無選擇，只能繼續作為一個 Angular 開發者。但仍然還有其他希望，有一天，我可能會加入其他使用其他框架的項目（如 React 或 Redux 或 Vue）。但是，現在我必須繼續戰斗，緊緊抓住記憶里尚未被谷歌入侵的領地，抵抗谷歌的進一步入侵。我們活著，為的是迎接新的一天。
我現在在 Whiteboard Dynamics 工作，不需要經常花很多時間在拷貝 Angular 代碼上，也不需要經常花時間開發每三個月就要重寫一次的代碼。但如果客戶提出要求，我們還是會用 Angular 開發一些東西——正如我所說的，我無法打破這個詛咒——但請相信我：你最好還是選擇人們會喜歡使用的開發庫。因為這些庫只會花費你更少的時間和金錢，而且可以保持你的靈魂永生。
英文原文
https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af
本文簡單介紹了Angular的核心概念與演進過程，從七大核心概念看其背后的設計亮點，通過分析Angular 從框架到平臺演進的過程來觀察其發展趨勢。方便讀者對Angular有個直觀的全局認識。
Angular 框架有七大核心概念，它們是Angular 的重要組成部分。
Angular 的七大核心概念
1. 模塊
在Web 開發中，通過依賴全局狀態或變量和保證JavaScript 文件引入順序來正確加載相應的類庫。比如：$ 代表jQuery，在引入$.superAwesomeDatePicker 類庫來實現日期選擇控件前，需要確保jQuery 已經正常載入。隨著項目中的程序越來越大、文件切分越來越細，就會需要一個成熟的模塊系統來幫助管理項目文件的依賴關系。在新的語言標準ES 6 中，提供了import 來導入在其他文件中定義的模塊，且用export 將諸如jQuery 或moment 這樣的依賴導出到業務代碼模塊中。
2 . 指令與組件
在Angular 中，指令是一個極其重要的概念。指令可以為特定DOM 元素添加新的行為特征，從而擴展元素的功能。指令與HTML 元素屬性的使用方式非常相似，但指令的可自定義特性在一定程度上彌補了HTML 元素屬性功能的不足，這也為多樣的Web前端開發創造了更多的可能性。
實際上，組件是指令的一種類型。以組件為基礎的架構模式是現在Web 前端開發的主流方式。不僅僅在Angular 中，在類似的React、Ember 或Polymer 等框架中也是很常見的。這種開發方式就是構建一個個小的組織代碼單元，每個代碼單元的職責定義清晰，并且可以在多個應用中復用。例如：想使用Google 地圖組件，就在頁面引入<google-map pointer="46.471089,11.332816"></google-map> 這樣語義化的標簽。
Angular 全面支持這樣的開發方式，在Angular 中組件是“一等公民”。伴隨組件而來的是組件樹的概念。一般來說，每個Angular 應用都有一棵組件樹，由應用組件或者叫頂層的根組件和許多子組件及兄弟組件組成。組件樹是很重要的概念，后續章節還會繼續講解。它有很多作用，比如形象地勾勒出UI 界面的組成，這種樹形結構也體現了從一個組件到另一個組件的數據流動，Angular 也依賴組件樹做出合適的變化監測策略。
一個博客模塊的組件樹例子如下。
一個博客模塊的組件樹例子
變化監測是Angular 在應用的數據變化后，用于決定哪個組件需要隨之刷新的機制。
3 . 模板和數據綁定
當使用組件標簽時，可以通過template 或templateUrl 屬性引入HTML 來描述讓Angular 渲染顯示的界面內容。另外，需要數據綁定機制來實現把數據映射到模板上，或者從模板（如input 控件）中取回數據。
4 . 服務和依賴注入
在Angular 中，如果說組件是用于處理界面和交互相關的，那么服務就是開發者用于書寫和放置可重用的公共功能（如日志處理、權限管理等）和復雜的業務邏輯的地方。服務可以被共享，從而被多個組件復用。在Angular 中，一個服務就是一個簡單的類。通常在組件中引用服務來處理數據和實現邏輯。
依賴注入可以幫助應用解耦，一般通過對實現服務的類加上@Injectable 裝飾器，同時把它注冊到Provider（可以在模塊、其他服務、根組件或需要注入服務的上層組件中實施），從而將服務提供給調用者使用。
Angular 的項目經理Brad 說過，Angular 現在更像是一個平臺，而不是簡單的類庫或者單一的框架。Angular 在技術架構上傾向于平臺化設計，其跨平臺開發特性使得周邊生態圈變得更加繁榮興旺。
Angular 平臺一覽
Angular 框架核心包含了以下內容：
其中，Zones 可以獨立于Angular 使用在其他地方，并且已經提交給TC39，TC39 也考慮將其納入ECMA 標準中。而渲染引擎也是平臺獨立的，從而可以方便地實施在桌面軟件和原生的移動客戶端中。
在此之上，還有不少其他的外部工具庫，類似于：
除了這些，Angular 周邊也有完善的工具體系：
當然，為了開發強大的應用，Angular 在功能開發上也提供了不少輔助模塊，例如：
以上內容先后介紹了Angular 核心概念和Angular 平臺提供的各種各樣的功能，那么Angular 相對于其他前端技術有什么特點呢？
它擁有超快的性能：
其中，Angular 服務端渲染（Server-Side-Render）會在后續章節中進行詳細講解和實踐介紹。
它支持完善流暢的開發體驗。除上面提到的CLI 工程化的命令行工具、Augury 審查工具和TypeScript 語言服務外，也包括：
Angular CLI 工程化流程
它的社區和周邊也強大多樣。除了上面提到的Material Design UI、Mobile Toolkit，還包括：
不得不說，基于最新Angular 的ionic 變得越發強大，是用JavaScript 技術開發移動應用的不錯選擇。同時，利用最新的PWA （Progressive Web App）Web 技術，能夠幫助我們很好地打造移動版網站。因此，在本書后面會用專門的章節來講解這兩個熱門話題。這就是你應該立即使用Angular 的原因！
在實際項目中，我們可以使用Angular 提供的模塊、組件、模板數據綁定、服務、依賴注入和注解等特性來實施應用開發，Angular 社區也提供了各種輔助周邊、功能模塊和開發工具等。這最終形成了性能強勁、開發體驗完善和社區周邊強大的Angular。
本文選自《揭秘Angular（第2版）》，獲取詳情點擊“了解更多”
√ 本書為谷歌開發者社區官方指定用書，由谷歌Angular技術開發團隊作序力薦。
√ 目前市面上*無僅有的基于Angular 4系統全面介紹這一技術方方面面的書籍。
√ 本書作者團隊從Angular早期版本問世以來即投入生產實踐，積累豐富實戰經驗。
√ 首版問世后飽受好評，國內一線前端團隊及技術社區資深專家集體亮相盛贊。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
