捌。NG中的NG鏡頭

最近很紅的《美國隊長3 -英雄內戰》中的NG鏡頭

NG鏡頭，通常放於影片結尾，指影片拍攝過程中，發生的一些烏龍鏡頭，製作單位把這些片段剪輯起來，讓觀眾可以會心一笑。

這個系列文章寫到這邊，相信大家對於Angular有一定的概念了
之前文章講了這麼多Angular的好，這篇我們來談Angular的「NG鏡頭吧」

效能差

這就是所謂的標題聳動阿....XD

請不要被這三個字嚇到了，讓我娓娓道來，Angular為了讓使用者方便，DOM操作幾乎被Angular綁在裡面，讓使用者不需要自己處理，這樣一來，我們寫的code行數減少了，但背後增加的是程式的負擔，也因為讓Angular持續監控著我們的資料與DOM，資料一有改變，DOM就會隨著資料改變，這樣是非常的消耗效能的一件事。

其實這個缺點在系統規模不大，其實並不太會發現，但系統規模越大，開發越來越多程式就會越變越肥，Angular要做的事情也越來越多，試想一下，一個人在一段時間能吃的餅有限，要是增加餅的數量，吃餅的時間勢必會增加。（大誤～


這邊我寫了一個測試「第一次」render效能的測試Demo：
測試目的：js第一次render畫面到DOM的效能

AngularJs效能測試Demo


React.js效能測試Demo《另一套紅透半邊天的前端framework》


Vue.js效能測試Demo《號稱light版的Angular，發源自中國》


由結果可知，AngularJs的確是比較慢一點，但實際上其實使用者感覺不到差別才是。
實務上，如果要在畫面上產生超過1萬筆資料，事實上不管是哪個framework測試起來結果都是很慘的，這要回歸到根本的問題「為什麼要一次產生這麼多資料在畫面」，而不是探討「哪個framework的效能會比較好」才是。

缺乏UI模版

原生Angular對於UI這塊也是比較缺乏。

解決方案：
AngularUI ：讓Angular可以使用很多UI相關套件。

當然也有其他的UI框架（framework），可以透過directive來封裝

• jQuery UI
• Semantic UI
• Kendo UI

繪製圖表

許多網站也會利用到圖表功能，原生Angular這一塊是比較缺乏的。

解決方案：
angular-chart ：讓Angular可以使用chart.js。

另外，同樣的，我們也可以透過directive來封裝其他圖表能力較強強的framework

• D3.js
• Echart

這兩套都是很強的圖表框架，當然也還有其他框架，而如何與Angular一起使用也是有很多教學的，就麻煩各位自行搜尋了。

搜尋引擎最佳化（SEO）

SEO對於行銷網站是很重要的一塊，目的是讓搜尋引擎的爬蟲程式來爬網站，讓搜尋引擎知道網站的關鍵字，進而出現在大家搜尋的結果裡面。

因為 HTML 的内容是透過Angular的雙向綁定在使用者瀏覽器（Browser）產生，但搜尋引擎爬蟲在爬頁面的時候，讀取到的頁面只是我們寫的template，並不是js程式run起來使用這所看到的樣子，這樣透過搜尋引擎網站就沒辦法靠著我們所想的方式去讓網站被搜尋到。

這邊提供我找到的解法：
思考改變，針對使用者一樣是return給使用者Angular產生的頁面，而對於搜尋引擎的request，則使用針對SEO設計的HTML頁面，而angular-seo就是相同概念的產物！

缺點總結

看了上述的幾項缺點，你會發現雖然Angular本身的功能很強，野心很大想要什麼東西都包起來做，但是也因為想要什麼事情都做，反而導致犧牲了效能（方便跟效能的關係就像是魚跟熊掌，不可兼得阿）。

而Angular對於其他部分（UI、SEO等等）是比較缺乏的，雖然Angular提供的directive也可以讓Angular來搭配封裝其他framework，但萬事起頭難，不是官方封裝好的東西，就是都是要自己刻，而且directive對剛入門於新手的門檻也是稍微高了一點，所以綜合來說，雖然任何問題有解法，但就是要花時間去處理。

文章回顧

AngularJs序章。改

從AngularJs思考模式起手

參・從望遠鏡探索Angular星系的奧秘

肆・跟著老師動吃動

伍・老車大改造

陸・Angular表單驗證

漆。發揮創造力，自己做出想像中的客制化套件（directive）！

作者碎碎唸

這個系列寫到這邊，如果能看的完大概也可以把ng的基礎學起來了。但ng其中還有很多細節沒有講到，只能有機會再用單篇的方式補齊了，先跟各位說聲Sorry。

寫完這個系列文章，剛好最近NG-CONF 2016正好剛結束，也表示NG2的時代即將來臨，我想，下個系列文章的想法，應該會跟TypesScript與NG2脫不了關係吧，敬請期待囉！

NG-CONF 2016

但是，不代表有了NG2就得放棄NG1，為什麼呢？

因為還是有許多系統正運作著NG1，有人使用就會有維護的需求，而且NG2跟NG1的概念其實落差蠻大的，所以學起來我認為也是不衝突的，多學多做多學習，久了就是自己的財富阿！屆時在利用文章與大家分享囉～

最後補充

這個系列文到這邊就連載完結囉！

這個系列文章想達到的目的：

1. 用淺顯易懂的的文字來說明AngularJs是什麼
2. 了解AngularJs的思維
3. 如何使用AngularJs
4. 手動實做AngularJs的應用
5. 激發大家對於AngularJs新的想法

希望這個系列文章能滿足各位的需求！
歡迎不吝嗇的給予我任何指教，謝謝～

謝謝各位收看，我們下次見囉。