Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design with AngularJS

Art Pai
September 26, 2013

Design with AngularJS

Some thoughts on how AngularJS can help web designers.

Talked on HappyDesigner Mini 分享會 #4. http://registrano.com/events/happydesigner-mini-4

Art Pai

September 26, 2013
Tweet

More Decks by Art Pai

Other Decks in Programming

Transcript

  1. example: switch <div ng-app> <label><input type="radio" ng-model="o" value="1">income</label> <label><input type="radio"

    ng-model="o" value="2">outcome</label> <label><input type="radio" ng-model="o" value="">total</label> <hr/> <div ng-switch on="o"> <div ng-switch-when="1">Income Div</div> <div ng-switch-when="2">Outcome Div</div> <div ng-switch-default>Total Div</div> </div> </div>
  2. Why AngualrJS jQuery: Abstraction of DOM API AngualrJS: Abstraction of

    DOM manipulation (with directive and data-binding)
  3. Webapp designer skills 1. Interface - HTML ✔ 2. Presentation

    - CSS ✔ 3. Logic - ( front-end developers work )
  4. 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 }
  5. 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% }