iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

6 Like 2 留言 34519 瀏覽

鐵人賽開發技術 DAY 9

入門AngularJS筆記與前端領域的學習筆記分享系列第 9 篇

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

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

iamya ‧ 2013-10-09

9 Like 2 留言 17055 瀏覽

鐵人賽開發技術 DAY 8

入門AngularJS筆記與前端領域的學習筆記分享系列第 8 篇

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

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

iamya ‧ 2013-10-08

4 Like 1 留言 31920 瀏覽

鐵人賽開發技術 DAY 7

入門AngularJS筆記與前端領域的學習筆記分享系列第 7 篇

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

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

iamya ‧ 2013-10-07

1 Like 0 留言 4892 瀏覽

鐵人賽開發技術 DAY 6

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 6 篇

技術 [8]用MAN架構打造超人般的網頁應用程式:AngularJS - Plugin:UI-Router

在昨天介紹的Routing中，讓大家對換頁有基本的概念後就要來介紹這個AngularJS上必裝超強的plugin:UI-Router。用MAN架構打造超人般的...

blackie1019i ‧ 2013-10-07

5 Like 0 留言 29113 瀏覽

鐵人賽開發技術 DAY 6

入門AngularJS筆記與前端領域的學習筆記分享系列第 6 篇

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

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

iamya ‧ 2013-10-06

5 Like 2 留言 2928 瀏覽

鐵人賽開發技術 DAY 5

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 5 篇

技術 [7]用MAN架構打造超人般的網頁應用程式:AngularJS - Routing

上一篇我們知道了如何透過Controller在同一頁做不同區塊的控制，今天我們則是要來學習如何透過Routing的方式控制url來切換頁面顯示。用MAN架構打...

blackie1019i ‧ 2013-10-06

4 Like 0 留言 2512 瀏覽

鐵人賽開發技術 DAY 4

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 4 篇

技術 [6]用MAN架構打造超人般的網頁應用程式:AngularJS - Controller/Scope

昨天我們知道了AngularJS是幹嘛的，這一章我們將從Controller與Scope來介紹AngualrJS的世界。用MAN架構打造超人般的網頁應用程式系...

blackie1019i ‧ 2013-10-05

4 Like 0 留言 26602 瀏覽

鐵人賽開發技術 DAY 5

入門AngularJS筆記與前端領域的學習筆記分享系列第 5 篇

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

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

iamya ‧ 2013-10-05

4 Like 0 留言 35097 瀏覽

鐵人賽開發技術 DAY 4

入門AngularJS筆記與前端領域的學習筆記分享系列第 4 篇

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

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

iamya ‧ 2013-10-04

3 Like 1 留言 3026 瀏覽

鐵人賽開發技術 DAY 3

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 3 篇

技術 [5]用MAN架構打造超人般的網頁應用程式:AngularJS - Intro & Architecture

在鐵人賽的第五天總算要進入MAN架構的主軸之一-AngularJS 這篇將介紹一下AngularJS的內容跟架構，開始帶大家進入前端MVC的世界用MAN架構打...

blackie1019i ‧ 2013-10-04

4 Like 1 留言 32965 瀏覽

鐵人賽開發技術 DAY 3

入門AngularJS筆記與前端領域的學習筆記分享系列第 3 篇

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

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

iamya ‧ 2013-10-03

6 Like 0 留言 40127 瀏覽

鐵人賽開發技術 DAY 2

入門AngularJS筆記與前端領域的學習筆記分享系列第 2 篇

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

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

iamya ‧ 2013-10-02

6 Like 1 留言 4627 瀏覽

技術使用 AngularJS 心得 Day 5 - 想怎樣搭穿，就怎樣穿搭（ ng-class, ng-style ）

延續昨天的主題， class 的套用當然不只是應用在表格的單 / 偶列樣式，也可將它應用在一般的 HTML Tag 中。而且比利用 jQuery 還直覺、方便。...

葉宇霖 ‧ 2013-10-01

7 Like 2 留言 2306 瀏覽

技術 [1]用MAN架構打造超人般的網頁應用程式:復仇者聯盟-用MAN"單"挑世界

你有想過一個人也有機會單挑世界嗎? 你可能會說這個人是*超人*吧還是傳說中的*超大型巨人* 錯!今天要介紹的是一個非常輕薄但足以挑戰世界的混合物種 - **M...

blackie1019i ‧ 2013-09-30

4 Like 2 留言 3010 瀏覽

鐵人賽開發技術 DAY 6

已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟) 系列第 4 篇

技術用MAN架構打造超人般的網頁應用程式-Day 12:AngularJS - Service

昨天介紹了Factory這個好用的AngularJS共用工廠後，今天要介紹一個有點類同的Services，來讓大家認識。用MAN架構打造超人般的網頁應用程式系...

Blackie Tsai ‧ 2013-09-27

4 Like 2 留言 5879 瀏覽

鐵人賽開發技術 DAY 4

AngularJS 系列第 4 篇

技術使用 AngularJS 心得 Day 4 - 美化表格（ ng-class-odd, ng-class-even ）

在上個範例中，在說明 JSON 資料格式 ng-repeat 的應用時，因為我偷偷地使用了 Twitter Bootstrap ，所以表格變漂亮了。但不能老是跟...

葉宇霖 ‧ 2013-09-26

6 Like 0 留言 14604 瀏覽

鐵人賽開發技術 DAY 3

AngularJS 系列第 3 篇

技術使用 AngularJS 心得 Day 3 - 填表格（ ng-repeat ）

由於我之前待的公司接的案子大多是製作官方網站或是活動網站，想當然耳，一定會遇到製作產品介紹、得獎名單需要利用 table 來製作表格，但相信各位一定都曉得，客戶...

葉宇霖 ‧ 2013-09-25

5 Like 1 留言 15452 瀏覽

鐵人賽開發技術 DAY 2

AngularJS 系列第 2 篇

技術使用 AngularJS 心得 Day 2 - 雙向繫結（ ng-model, ng-bind ）

今天稍微進階一點點，做個跟使用者互動的雙向繫結。並解將輸入的內容，顯示在畫面中。 input 用 ng-model 就對了在前一個範例中，只是單單先將 dat...

葉宇霖 ‧ 2013-09-24

4 Like 0 留言 1741 瀏覽

鐵人賽開發技術 DAY 3

已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟) 系列第 3 篇

技術用MAN架構打造超人般的網頁應用程式-Day 09:AngularJS - Directives

今天要談到的是Directives，這相當於AngularJS精髓的東西，透過Directives我們可以不必像以前直接操作dom物件去控制畫面的產生，只要兩邊...

Blackie Tsai ‧ 2013-09-24

10 Like 4 留言 7025 瀏覽

鐵人賽開發技術 DAY 1

AngularJS 系列第 1 篇

達標好文技術使用 AngularJS 心得 Day 1 - 繫結資料超方便

在第一次參加 AngularJS 的聚會，就被那將 JSON 資料綁定在 HTML 中，以及即時 input 、 output ，卻沒有寫幾行 code 嚇到了...

葉宇霖 ‧ 2013-09-23

4 Like 2 留言 2427 瀏覽

鐵人賽開發技術 DAY 2

已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟) 系列第 2 篇

技術用MAN架構打造超人般的網頁應用程式-Day 08:AngularJS - Plugin:UI-Router

在昨天介紹的Routing中，讓大家對換頁有基本的概念後就要來介紹這個AngularJS上必裝超強的plugin:UI-Router。用MAN架構打造超人般的...

Blackie Tsai ‧ 2013-09-23

5 Like 1 留言 2606 瀏覽

鐵人賽開發技術 DAY 1

已廢除請轉移至(用MAN架構打造超人般的網頁應用程式:復仇者聯盟) 系列第 1 篇

技術用MAN架構打造超人般的網頁應用程式-Day 07:AngularJS - Routing

上一篇我們知道了如何透過Controller在同一頁做不同區塊的控制，今天我們則是要來學習如何透過Routing的方式控制url來切換頁面顯示。用MAN架構打...

Blackie Tsai ‧ 2013-09-22

7 Like 5 留言 18284 瀏覽

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

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

lalabear ‧ 2012-08-09

5 Like 1 留言 10757 瀏覽

技術邊學AngularJS邊做Todo List (5) －為測試作準備

利於易測試，是AngularJS這個框架的一大特色。由於AngularJS在MVC的架構設計，加上雙向資料綁定的特色，UI功能和資料結合的相當鬆散，因此不管...

lalabear ‧ 2012-07-28

7 Like 2 留言 16042 瀏覽

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

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

lalabear ‧ 2012-07-21

9 Like 4 留言 14161 瀏覽

技術邊學AngularJS邊做Todo List (3) － Todo List 刪項目

上一回我們用AngularJS完成最基本的加入項目功能，而就Todo List來說，當然有加入，就要有刪除，才能知道事情做完了。這回的刪除功能，借助Angu...

lalabear ‧ 2012-07-20

12 Like 2 留言 27080 瀏覽

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

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

lalabear ‧ 2012-07-17

14 Like 3 留言 44857 瀏覽

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

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

lalabear ‧ 2012-07-12

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

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

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

技術 [8]用MAN架構打造超人般的網頁應用程式:AngularJS - Plugin:UI-Router

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

技術 [7]用MAN架構打造超人般的網頁應用程式:AngularJS - Routing

技術 [6]用MAN架構打造超人般的網頁應用程式:AngularJS - Controller/Scope

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

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

技術 [5]用MAN架構打造超人般的網頁應用程式:AngularJS - Intro & Architecture

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

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

技術 使用 AngularJS 心得 Day 5 - 想怎樣搭穿，就怎樣穿搭（ ng-class, ng-style ）

技術 [1]用MAN架構打造超人般的網頁應用程式:復仇者聯盟-用MAN"單"挑世界

技術 用MAN架構打造超人般的網頁應用程式-Day 12:AngularJS - Service

技術 使用 AngularJS 心得 Day 4 - 美化表格（ ng-class-odd, ng-class-even ）

技術 使用 AngularJS 心得 Day 3 - 填表格（ ng-repeat ）

技術 使用 AngularJS 心得 Day 2 - 雙向繫結（ ng-model, ng-bind ）

技術 用MAN架構打造超人般的網頁應用程式-Day 09:AngularJS - Directives

達標好文 技術 使用 AngularJS 心得 Day 1 - 繫結資料超方便

技術 用MAN架構打造超人般的網頁應用程式-Day 08:AngularJS - Plugin:UI-Router

技術 用MAN架構打造超人般的網頁應用程式-Day 07:AngularJS - Routing

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

技術 邊學AngularJS邊做Todo List (5) － 為測試作準備

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

技術 邊學AngularJS邊做Todo List (3) － Todo List 刪項目

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

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

標記使用者

技術使用 AngularJS 心得 Day 5 - 想怎樣搭穿，就怎樣穿搭（ ng-class, ng-style ）

技術用MAN架構打造超人般的網頁應用程式-Day 12:AngularJS - Service

技術使用 AngularJS 心得 Day 4 - 美化表格（ ng-class-odd, ng-class-even ）

技術使用 AngularJS 心得 Day 3 - 填表格（ ng-repeat ）

技術使用 AngularJS 心得 Day 2 - 雙向繫結（ ng-model, ng-bind ）

技術用MAN架構打造超人般的網頁應用程式-Day 09:AngularJS - Directives

達標好文技術使用 AngularJS 心得 Day 1 - 繫結資料超方便

技術用MAN架構打造超人般的網頁應用程式-Day 08:AngularJS - Plugin:UI-Router

技術用MAN架構打造超人般的網頁應用程式-Day 07:AngularJS - Routing

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

技術邊學AngularJS邊做Todo List (5) －為測試作準備

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

技術邊學AngularJS邊做Todo List (3) － Todo List 刪項目

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

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