iT邦幫忙

angularjs相關文章
共有 88 則文章
鐵人賽 開發技術 DAY 30

技術 Day30- 入門AngularJS筆記-directive

終於到了第三十天, 這段日子大多分享angularJS內建的directive筆記, 有些內建指令可以直接完成我們想要的效果。 但有些內建的指令無法滿足需求,...

達標好文 技術 邊學AngularJS邊做Todo List (1) - Hello World

HTML是打造Web的根本,但是它最早的設計概念是文件式的,它被當成是一頁頁的文件/資源來看待。 這樣的概念簡單、明白,容易撰寫、也讓Web成為一種非常普及的...

鐵人賽 開發技術 DAY 2

技術 Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model

簡單使用幾個html標籤,完成angularJS基本的雙向綁定。 如何使用? 先來看看Demo Demo: http://jsbin.com/ogecuw/1/...

鐵人賽 開發技術 DAY 22

技術 Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class

ng-class是什麼? 如果我們要使用angular在html中設定css樣式,我們可以使用ng-class這個指令。 改寫官方範例: 使用ng-model與...

鐵人賽 開發技術 DAY 4

技術 Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click

ng-click是什麼? 顧名思義,是點擊觸發的事件。 Demo: http://jsbin.com/angularjs-controller/3 ng-cli...

鐵人賽 開發技術 DAY 3

技術 Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller

ng-controller是什麼? 主要用來綁定view(html)和model(js)的連結。 本次範例: 使用ng-controller,建立view和mo...

鐵人賽 開發技術 DAY 7

技術 Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat

ng-repeat是什麼? 我們可以透過ng-repeat指令,從陣列中取出每一個item的內容。 Demo: http://jsbin.com/ukatix/...

鐵人賽 開發技術 DAY 9

技術 Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options

ng-options是什麼? HTML SELECT事件有一個ng-options參數, ng-options透過ng-model 綁定,用來顯示下拉選單。 介...

鐵人賽 開發技術 DAY 24

技術 Day24- 入門AngularJS筆記-AngularJS指令(21) $watch

$watch是什麼? 使用$watch可以指定監控的範圍,一旦範圍內的value發生改變,所有地方都會自動更新, 用來確保view和model的即時綁定,當vi...

技術 邊學AngularJS邊做Todo List (2) - Todo List 動起來

上次體驗過 AngularJS HelloWorld的範例之後,相信大家能夠體驗到AngularJS 相向互動的便利性,不需要寫太多的code,馬上就能有即時...

鐵人賽 開發技術 DAY 6

技術 Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init

ng-init 是什麼? model一開始載入,會先執行ng-init,我們可以利用ng-init設定初始值。 Demo: http://jsbin.com/u...

鐵人賽 開發技術 DAY 11

技術 Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change

ng-change是什麼? 當我們改變輸入的數值,就會執行ng-change裡的事情。 改寫官方文件的Demo: http://jsbin.com/ICAyAN...

鐵人賽 開發技術 DAY 5

技術 Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show

ng-show是什麼? ng-show/ng-hide是有條件的顯示/隱藏html內的內容。 先來看看1個簡單的範例如下: 官方網站的ng-show範例-清楚展...

鐵人賽 開發技術 DAY 21

技術 Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html

ng-bind-html是什麼? 是用來呈現html效果的指令。 本篇分享將會介紹ng-bind、ng-bind-html、ng-bind-html-unsaf...

鐵人賽 開發技術 DAY 26
我在前端 ng 時 系列 第 26

技術 Service,Factory 傻傻分不清楚

網路上有很多 Service vs Factory 的文章,最常看到的說法是 Service 是用 new 來建立的,而 Factory 是回傳 return...

鐵人賽 開發技術 DAY 17

技術 Day17- 入門AngularJS筆記-AngularJS的timeout應用

$timeout是什麼? timeout 顧名思義是和時間有關,用來倒數、計時的一種方法。 而$timeout則是應用於angular的指令 本日參考範例:...

技術 邊學AngularJS邊做Todo List (6) -E2E測試(上)

上一回說過,E2E測試(End-to-End Testing)是從使用者與應用程式的互動方式來進行測試,因此寫測試時,會從操作的面向來思考測試寫法。Angul...

鐵人賽 開發技術 DAY 12

技術 Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include

ng-include 是什麼? ng-include 是angular用來載入html的指令。 改寫官方Demo: http://plnkr.co/edit/Y...

鐵人賽 開發技術 DAY 19

技術 Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak

ng-cloak是什麼? 和ng-bind很類似,同樣可以解決angularjs沒有載入完成或發生失敗的狀況。 但ng-cloak指令需要另外增加css,用來解...

鐵人賽 開發技術 DAY 6
我在前端 ng 時 系列 第 6

技術 ng-if & ng-show

我們很常遇到的需求是當某些條件成立時,畫面上特定地方要把它藏起來,不能讓使用者看到。 這時候就是 ng-If 跟 ng-show 出場的時候。 ng-show:...

技術 邊學AngularJS邊做Todo List (4) - 修改待辦事項

我們的todo list已經有了新增、刪除的功能,還差一步修改,就算五臟俱全了。 這次新加入的修改功能,會使用到ng-show、ng-hide、ng-dblc...

鐵人賽 開發技術 DAY 13

技術 Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src

ng-src是什麼? ng-src是用來取代html中 img 標籤裡的src屬性。 由於AngularJS是整個網站載完後才開始編譯, 使用ng-src可以解...

鐵人賽 開發技術 DAY 8

技術 Day8- 入門AngularJS筆記-AngularJS指令(7): input

介紹HTML input事件如何在angularJS中使用。 HTML checkbox,在angularJS官方文件的Demo: http://jsbin.c...

鐵人賽 開發技術 DAY 15

技術 Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記

在一開始分享AngularJS 主題的時候,有介紹到AngularJS 是遵循MVC 框架。 Day3的內容: http://ithelp.ithome.com...

鐵人賽 開發技術 DAY 29

技術 Day29- 入門AngularJS筆記-filter

filter是什麼? angular的filter,可以幫資料做過濾。 善用內建filter或自定filter,針對資料進一步篩選,呈現我們想要的資料。 當專案...

鐵人賽 開發技術 DAY 27

技術 Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form

ng-form是什麼? angular針對form這個標籤包裝起來,自訂ng-form這個指令,增加對應的屬性與方法, 用來進一步處理表單上可能會遇到的問題。...

鐵人賽 開發技術 DAY 10

技術 Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch

ng-switch是什麼? 我們可以根據ng-switch去篩選要選擇的內容。 通常我們會和ng-option的下拉選單一起搭配使用。 官方文件Demo: ht...

鐵人賽 開發技術 DAY 2
我在前端 ng 時 系列 第 2

技術 jQuery 跟 AngularJS 的糾葛

AngularJS 有些人覺得難學理由之一,是因為它跟大多數網站所使用的 jQuery 設計思維差很多。 而且 AngularJS 又有內建 jqLite (j...

鐵人賽 開發技術 DAY 16

技術 Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked

ng-checked是什麼? 如果你要讓勾選框有**”選擇全部“**勾選或”**取消全部“**勾選的狀態, 可以簡單使用ng-checked來作設定。 改寫官方...

鐵人賽 開發技術 DAY 33

技術 [Angular JS]Hello Angular

雖然IT鐵人賽告一段落了,總覺得前端JS框架沒有包含進來,以至於有些Spring MVC的Async的method沒有應用到有點可惜,所以打算繼續學習Angul...