終於到了第三十天， 這段日子大多分享angularJS內建的directive筆記， 有些內建指令可以直接完成我們想要的效果。 但有些內建的指令無法滿足需求，...
HTML是打造Web的根本，但是它最早的設計概念是文件式的，它被當成是一頁頁的文件/資源來看待。 這樣的概念簡單、明白，容易撰寫、也讓Web成為一種非常普及的...
簡單使用幾個html標籤，完成angularJS基本的雙向綁定。 如何使用? 先來看看Demo Demo: http://jsbin.com/ogecuw/1/...
ng-class是什麼？ 如果我們要使用angular在html中設定css樣式，我們可以使用ng-class這個指令。 改寫官方範例： 使用ng-model與...
ng-click是什麼? 顧名思義，是點擊觸發的事件。 Demo: http://jsbin.com/angularjs-controller/3 ng-cli...
ng-options是什麼？ HTML SELECT事件有一個ng-options參數， ng-options透過ng-model 綁定，用來顯示下拉選單。 介...
ng-controller是什麼? 主要用來綁定view(html)和model(js)的連結。 本次範例： 使用ng-controller，建立view和mo...
ng-repeat是什麼? 我們可以透過ng-repeat指令，從陣列中取出每一個item的內容。 Demo: http://jsbin.com/ukatix/...
$watch是什麼？ 使用$watch可以指定監控的範圍，一旦範圍內的value發生改變，所有地方都會自動更新， 用來確保view和model的即時綁定，當vi...
ng-change是什麼？ 當我們改變輸入的數值，就會執行ng-change裡的事情。 改寫官方文件的Demo： http://jsbin.com/ICAyAN...
ng-init 是什麼? model一開始載入，會先執行ng-init，我們可以利用ng-init設定初始值。 Demo: http://jsbin.com/u...
上次體驗過 AngularJS HelloWorld的範例之後，相信大家能夠體驗到AngularJS 相向互動的便利性，不需要寫太多的code，馬上就能有即時...
ng-show是什麼? ng-show/ng-hide是有條件的顯示/隱藏html內的內容。 先來看看1個簡單的範例如下: 官方網站的ng-show範例-清楚展...
網路上有很多 Service vs Factory 的文章，最常看到的說法是 Service 是用 new 來建立的，而 Factory 是回傳 return...
ng-bind-html是什麼？ 是用來呈現html效果的指令。 本篇分享將會介紹ng-bind、ng-bind-html、ng-bind-html-unsaf...
$timeout是什麼？ timeout 顧名思義是和時間有關，用來倒數、計時的一種方法。 而$timeout則是應用於angular的指令 本日參考範例：...
我們很常遇到的需求是當某些條件成立時，畫面上特定地方要把它藏起來，不能讓使用者看到。 這時候就是 ng-If 跟 ng-show 出場的時候。 ng-show:...
ng-cloak是什麼？ 和ng-bind很類似，同樣可以解決angularjs沒有載入完成或發生失敗的狀況。 但ng-cloak指令需要另外增加css，用來解...
ng-include 是什麼？ ng-include 是angular用來載入html的指令。 改寫官方Demo： http://plnkr.co/edit/Y...
上一回說過，E2E測試（End-to-End Testing）是從使用者與應用程式的互動方式來進行測試，因此寫測試時，會從操作的面向來思考測試寫法。Angul...
ng-src是什麼？ ng-src是用來取代html中 img 標籤裡的src屬性。 由於AngularJS是整個網站載完後才開始編譯， 使用ng-src可以解...
介紹HTML input事件如何在angularJS中使用。 HTML checkbox，在angularJS官方文件的Demo: http://jsbin.c...
filter是什麼？ angular的filter，可以幫資料做過濾。 善用內建filter或自定filter，針對資料進一步篩選，呈現我們想要的資料。 當專案...
AngularJS 有些人覺得難學理由之一，是因為它跟大多數網站所使用的 jQuery 設計思維差很多。 而且 AngularJS 又有內建 jqLite (j...
我們的todo list已經有了新增、刪除的功能，還差一步修改，就算五臟俱全了。 這次新加入的修改功能，會使用到ng-show、ng-hide、ng-dblc...
ng-form是什麼？ angular針對form這個標籤包裝起來，自訂ng-form這個指令，增加對應的屬性與方法， 用來進一步處理表單上可能會遇到的問題。...
在一開始分享AngularJS 主題的時候，有介紹到AngularJS 是遵循MVC 框架。 Day3的內容： http://ithelp.ithome.com...
ng-href是什麼？ ng-href是用來取代html中 a 標籤裡的href屬性。 為什麼要使用ng-href？ 如果Angular還沒載入或載入失敗，會直...
今天稍微進階一點點，做個跟使用者互動的雙向繫結。並解將輸入的內容，顯示在畫面中。 input 用 ng-model 就對了 在前一個範例中，只是單單先將 dat...
ng-checked是什麼？ 如果你要讓勾選框有**”選擇全部“**勾選或”**取消全部“**勾選的狀態， 可以簡單使用ng-checked來作設定。 改寫官方...
iamya
yvonneyu
葉宇霖
iThome鐵人賽
看影片追技術