Tweet
Tweet

Slide 1

Slide 1 text

dochi? jQuery AngularJS vs

Slide 2

Slide 2 text

@jaceju ⼤大澤⽊木⼩小鐵

Slide 3

Slide 3 text

該學
 jQuery 還是 AngularJS ？

Slide 4

Slide 4 text

選⼿手介紹

Slide 5

Slide 5 text

⽤用 CSS 選擇器語法來選擇想要的元素! 然後對這些元素進⾏行操作或綁定事件處理程式 jQuery ! ! ! $('.post').on('click', function () {! ...! });!

Slide 6

Slide 6 text

將 HTML 當成程式平台⽽而⾮非單純的⽂文件，! 將狀態和事件直接⽤用⾃自訂的 HTML 標籤或屬性來表達。 AngularJS 


Slide 7

Slide 7 text

Round 1

Slide 8

Slide 8 text

http://goo.gl/CAja7s 範例畫⾯面 客⼾戶說：⼀一定要給我⽀支援 IE 7 以上的版本

Slide 9

Slide 9 text

! ! ! !
    !
  • Home
    • !
  • Profile
    • !
  • Messages
    • !
  • Settings
    • !
! !

Click Me

! ! ! ! HTML 結構 http://goo.gl/CAja7s

Slide 10

Slide 10 text

jQuery

Slide 11

Slide 11 text

程式運作⽅方式 1. 在 p 標籤上綁定⼀一個按下事件處理程式。 2. 當 p 標籤被按下時，切換選單元件的
 上下滑特效。

Slide 12

Slide 12 text

程式碼 $(function () {! var $menu = $('body > ul'); // 找到選單! var $button = $('body > p'); // 找到按鈕! ! $button.on('click', function () {! $menu.slideToggle(); // 切換上下滑效果! });! });! http://goo.gl/N4nLtS

Slide 13

Slide 13 text

var $menu = $('#menu');! var $button = $('.button');
    ...
!

...

改⽤用 id / class

Slide 14

Slide 14 text

AngularJS

Slide 15

Slide 15 text

程式運作⽅方式 1. 利⽤用變數 isClosed 來記住
 ⺫⽬目前選單呈現狀態。 2. 透過 ng-click 來綁定 p 標籤的事件，
 以決定 isClosed 的值。 3. 透過 ng-class 與 isClosed 
 來決定要不要顯⽰示選單。

Slide 16

Slide 16 text

程式碼 ! ! ! !
    !
  • Home
    • !
  • Profile
    • !
  • Messages
    • !
  • Settings
    • !
! !

Click Me

! ! ! ! ! http://goo.gl/Fjo52H

Slide 17

Slide 17 text

CSS3 transition ul {
 ...! overflow-y: hidden;! max-height: 500px;! transition-property: all;! transition-duration: 1s;! }! ul.closed {! max-height: 0;! }! http://goo.gl/Fjo52H

Slide 18

Slide 18 text

等等， CSS3 ？

Slide 19

Slide 19 text

Can I use transition? http://goo.gl/FUAyDT

Slide 20

Slide 20 text

說好的 IE 7 呢？

Slide 21

Slide 21 text

jQuery AngularJS 勝 IE ⽀支援度

Slide 22

Slide 22 text

Round 2

Slide 23

Slide 23 text

http://goo.gl/wUhIim 範例畫⾯面

Slide 24

Slide 24 text

HTML 結構 ! ! ! !

Current Value: 1

! !

!

! ! ! ! http://goo.gl/wUhIim

Slide 25

Slide 25 text

AngularJS

Slide 26

Slide 26 text

程式運作⽅方式 1. 利⽤用變數 val 來記住⺫⽬目前的數值。 2. 透過 ng-bind 將 val 變數綁定⾄至
 span 標籤顯⽰示。 3. 透過 ng-model 將 val 變數與
 input / span 標籤做雙向資料綁定 
 (Two Way Data-Binding) 。

Slide 27

Slide 27 text

程式碼 http://goo.gl/Tbx6UD ! ! ! !

Current Value: 1

!

!

! ! ! ! !

Slide 28

Slide 28 text

jQuery

Slide 29

Slide 29 text

程式運作⽅方式 1. 利⽤用變數 val 來記住⺫⽬目前的數值。 2. 當操作 slider 元件時，透過 input 事件
 來更新其他元件的內容或值。 3. 當操作 text 元件時，透過 keyup 事件
 來更新其他元件的內容或值。

Slide 30

Slide 30 text

程式碼 http://goo.gl/nhwtyN (function () {! var val = 1;! var $span = $('span').text(val);! var $slider = $('input[type=range]').val(val);! ! ! $slider.on('input', function () {! val = $(this).val(); // 更新 val 數值! $span.text(val); // 同步 $span 內容! ! });! ! ! ! ! ! ! })();

Slide 31

Slide 31 text

程式碼 (function () {! var val = 1;! var $span = $('span').text(val);! var $slider = $('input[type=range]').val(val);! var $text = $('input[type=text]').val(val);! ! $slider.on('input', function () {! val = $(this).val(); // 更新 val 數值! $span.text(val); // 同步 $span 內容! $text.val(val); // 同步 $text 值! });! ! $text.on('keyup', function () {! val = $(this).val(); // 更新 val 數值! $span.text(val); // 同步 $span 內容! $slider.val(val); // 同步 $slider 值! });! })(); http://goo.gl/nhwtyN

Slide 32

Slide 32 text

val $span $text 程式碼⾏行數： 9

Slide 33

Slide 33 text

val $span $text $slider 程式碼⾏行數： 16

Slide 34

Slide 34 text

val $span $text new element $slider 程式碼⾏行數： 25

Slide 35

Slide 35 text

val $span $text new element $slider new element 程式碼⾏行數： 36

Slide 36

Slide 36 text

val $span $text new element $slider new element new element 程式碼⾏行數： 49

Slide 37

Slide 37 text

val $span $text new element $slider new element new element 程式碼⾏行數! ⼤大爆炸！！

Slide 38

Slide 38 text

jQuery AngularJS 勝 元件互動便利性

Slide 39

Slide 39 text

時間來不及
 快點做結論

Slide 40

Slide 40 text

jQuery AngularJS 主要開發⽅方式 盡可能不修改 HTML
 將⾴頁⾯面邏輯寫在 JS 中 HTML 為主， JS 為輔 適⽤用場合 畫⾯面特效 互動表單 元素特效 透過 JavaScript 計算 CSS3
 (或 jQuery-like API 輔助) 擴充機制 plugins directives IE ⽀支援度 IE6 以上 (1.x) IE8 以上

Slide 41

Slide 41 text

先學 j Query 然後依專案性質決定使⽤用哪⼀一個 還是要摻在⼀一起做成撒尿⽜牛丸也可以 再學 AngularJS