Design with AngularJS - Speaker Deck

Slide 1

Slide 1 text

Design with AngularJS for web designer

Slide 2

Slide 2 text

Me @minipai

Slide 3

Slide 3 text

Web designer skills 1. Structure - HTML ✔ 2. Presentation - CSS ✔ 3. Behavior - JavaScript ?

Slide 4

Slide 4 text

JavaScript is hard So, we have… jQuery: DOM manipulation Library jQuery plugin: Widget Library

Slide 5

Slide 5 text

JavaScript is hard But... jQuery: Hard to maintain/reuse jQuery plugin: Only exists for typical needs.

Slide 6

Slide 6 text

Learn to become a front-end developer?

Slide 7

Slide 7 text

Try AngularJS!

Slide 8

Slide 8 text

example: toggle

on/off

Lorem ipsum message

Slide 9

Slide 9 text

example: switch

income outcome total

Income Div

Outcome Div

Total Div

Slide 10

Slide 10 text

Why AngualrJS jQuery: Abstraction of DOM API AngualrJS: Abstraction of DOM manipulation (with directive and data-binding)

Slide 11

Slide 11 text

Webapp designer skills 1. Interface - HTML ✔ 2. Presentation - CSS ✔ 3. Logic - ( front-end developers work )

Slide 12

Slide 12 text

Animation is Hard

Slide 13

Slide 13 text

Animate with AngularJS ngAnimation .ng-enter .ng-enter.ng-enter-active .ng-leave .ng-leave.ng-leave-active

Slide 14

Slide 14 text

example: fade .ng-enter, .ng-leave { transition: 600ms all } .ng-enter { opacity:0 } .ng-enter.ng-enter-active { opacity:1 } .ng-leave { opacity:1 } .ng-leave.ng-leave-active { opacity:0 }

Slide 15

Slide 15 text

example: slide .ng-enter, .ng-leave { transition: 600ms all } .ng-enter { left:-200% } .ng-enter.ng-enter-active { left:0 } .ng-leave { left:0 } .ng-leave.ng-leave-active { left:-200% }