iT邦幫忙

DAY 30
0

我在前端 ng 時系列 第 30

AngularJS 1.3 跟 一點點的 2.0 (外加鐵人心得)

  • 分享至 

  • xImage
  •  

之前的鐵人文章都是使用 version AngularJS 1.2.x。

今天來介紹 10/13/2014 release 的 AngularJS 1.3 功能。

1.one-time binding

AngularJS 在 1.3 之前版本只有 two-way binding。
想要使用 one-way binding 功能,我們只能使用 bindonce 等相關外掛套件。
1.3 之後,AngularJS 也開始有原生的 one-time binding。

使用方法很簡單,只要在原本 two-way data binding 寫法前面加上 :: 就好。
該屬性就會變成 static value,不會被 digits cycle 檢查。
範例:http://plnkr.co/edit/dXXf4e1jmzncGMO9seVw?p=preview

<div>名字是:{{::Ctrl.luffy.name}}</div> 

2. 效能進步

1.3 加強了處理 DOM 的速度跟記憶體消耗的處理方式。
( 1.3 的 digest cycle 速度是 1.2.x 的 44% 參考)

3. ngAria

增加 ARIA attribute 的 module,幫助需要輔助科技的訪客閱讀網站內容。
(想了解 ARIA 的朋友可以看 othree 大大的部落格

  1. ngMessages
    幫助我們呈現 Form 錯誤訊息的 directives。
    範例:http://plnkr.co/edit/mI9UW14xVBQAgFtSucqG?p=preview

原先的我們呈現錯誤訊息方式是 檢查 form 的 $error +使用 ng-if。

  <form name="yourForm">
    <label for="yourField">名稱1</label>
    <input id="yourField" type="text" ng-model="field1" name="yourField" required minlength="3" />
    <div ng-if="yourForm.yourField.$error">
      <!-- 需指定完整的 model -->
      <div ng-if="yourForm.yourField.$error.required">名稱是必填</div>
      <div ng-if="yourForm.yourField.$error.minlength">長度需要大於3</div>
    </div>
  </form>

變成使用 ngMessages 後,畫面變得乾淨許多。
而且 ngMessages 可讓畫面只會出現一個錯誤。
確保使用者一次只會看到一個錯誤,增加使用者體驗。

  <form name="myForm">
    <label for="myField">名稱</label>
    <input id="myField" type="text" ng-model="field2" name="myField" required minlength="3" />
    <div ng-messages="myForm.myField.$error">
       <!-- 包在 ng-messages 的就是 myForm.myField.$error 的 children -->
      <div ng-message="required">名稱是必填</div>
      <div ng-message="minlength">長度需要大於3</div>
    </div>
  </form>

5. ngModelOptions

可以給 ng-model 更多的額外的參數。

ex: updateOn ,ngModel 會在 options 指定的事件才會更新綁定 model

 <input type="text" name=“userName" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" />

ex: debounce ,ngModel 會等 1s 才會更新綁定 model

<input type="text" name=“userName" ng-model="user.name"  ng-model-options="{ debounce: 1000 }" />

6. 不支援 IE8

為了加強效能,AngularJS team 宣布 1.3 停止支援 IE8。
假如網站是強力需要支援 IE8 ,還是保持在 1.2 版本吧。
要不然,其實 IE8 只是一些功能不能跑,基本的還是不會影響。
這就要看工程師的取捨了。

更多介紹:
升級指南
AngularJS 1.3 release note


2.0

在最近的 ng-europe 2014,AngularJS 2.0 是個熱門大話題。(note
AngularJS 2.0 變動事情非常的多,功能也強大了許多。
基本上可以說不是原本的 AngularJS,像是不同媽生的一樣。

主要原因 AngularJS team 想要解決的問題(效能問題占了大多數),不是修修 code 就可以完成的。
要改版,需要把核心整個翻修。
並且還要因應 ECMAscript 6 的寫法進行實做。
Adventures in Angular 有介紹 2.0 的廣播可以聽)

features 有:
Mobile 上效能期望可以跟原生 APP 媲美
NO jqlite, NO ng-controller, NO $scope 。 ( 參考 Igor Minar & Tobias Bosch 簡報)
Shadow Dom
router 更進化 (2.0 router github)
ECMAscript 6 寫法
等等很多...

因為 2.0 有太多我不熟的技術,現在也還在摸索中就沒有介紹了。
AngularJS 2.0 的 release date 也還沒有明確的日期。
希望可以在那之前把相關技術學習好~ ^^

衍生閱讀:
ng-learn.org AngularJS 2.0 Preview
How I’ve Improved My Angular Apps by Banning ng-controller by Tero Parviainen
Sideshare: SPA for angular 2.0


鐵人 30 天心得:

30 天結束了。

中間遇到了像跑馬拉松一樣,想放棄又不想放棄的心情。
感謝我周邊的朋友一直 push 我,叫我繼續寫下去。
真是萬分感謝,要不然這第 30 天文章應該不會出現吧XD

覺得鐵人賽的大家都很厲害很有恆心,感覺到技術圈大家對技術的熱情~~~~

30 天的寫作讓我更加的瞭解 AngularJS,很多基礎都是回去翻書加以研究才能寫出文章出來。


(使用 名言錦句產生器 製作)

最後希望我學習跟寫文章的熱情還會繼續保持,感謝鐵人賽給我認識學習技術的新方法^^


上一篇
生生不息的 watcher - 介紹 data-binding
系列文
我在前端 ng 時30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
pajace2001
iT邦研究生 1 級 ‧ 2014-10-28 22:27:02

恭喜~~拍手灑花

0
Pymaster
iT邦新手 5 級 ‧ 2014-10-29 10:38:29

恭喜完成鐵人賽

希望 Angular 2.0 我就已經跳槽了 (菸

我要留言

立即登入留言