Tweet
Tweet

Slide 1

Slide 1 text

AngularJS for Designer

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

@minipai

Slide 4

Slide 4 text

Why AngularJS

Slide 5

Slide 5 text

AngularJS is for Designer The goal was to enable web-designers (non-programmers) to build simple app like websites, …
 
 —Misko Hevery, creator of AngularJS

Slide 6

Slide 6 text

The JavaScript ★ foo = true ★ foo = "bar" ★ foo = {key: value} ★ foo = ! foo ★ foo == 10

Slide 7

Slide 7 text

Learn AngularJS

Slide 8

Slide 8 text

1. Drop down menu ★ You want to make a drop down menu — a element that toggles another element

Slide 9

Slide 9 text

1. Drop down menu Action !
  • list item
    • …

Slide 10

Slide 10 text

2. Tab ★ You want to make a tab — a set of elements each toggles an element

Slide 11

Slide 11 text

2. Tab
  • Home
  • Profile
  • Messages
…
…
…

Slide 12

Slide 12 text

3. Single Page ★ You want to make a single page design — ajax load page by link

Slide 13

Slide 13 text

3. Single Page !
  • Home
  • About
  • blog

Slide 14

Slide 14 text

4. Lightbox ★ You want to make a light-box — ajax load content of light-box — click toggle display of light-box

Slide 15

Slide 15 text

4. Light-box Show Modal 1 ! Show Modal 2

{{ modalTitle }}

Close
!

Slide 16

Slide 16 text

Summary ★ jQuery — Abstraction of DOM API — You manipulate DOM manually ★ AngularJS — Abstraction of DOM manipulation — Let data manipulate DOM for you

Slide 17

Slide 17 text

END