Design with AngularJS

Some thoughts on how AngularJS can help web designers.

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

Transcript

1. Design with AngularJS for web designer
2. Me @minipai
3. Web designer skills 1. Structure - HTML ✔ 2. Presentation - CSS ✔ 3. Behavior - JavaScript ?
4. JavaScript is hard So, we have… jQuery: DOM manipulation Library jQuery plugin: Widget Library
5. JavaScript is hard But... jQuery: Hard to maintain/reuse jQuery plugin: Only exists for typical needs.
6. Learn to become a front-end developer?
7. Try AngularJS!
8. example: toggle <div ng-app> <button ng-click="showMsg = !showMsg">on/off</button> <div ng-show="showMsg">Lorem ipsum message</div> </div>
9. 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>
10. Why AngualrJS jQuery: Abstraction of DOM API AngualrJS: Abstraction of DOM manipulation (with directive and data-binding)
11. Webapp designer skills 1. Interface - HTML ✔ 2. Presentation - CSS ✔ 3. Logic - ( front-end developers work )
12. Animation is Hard
13. Animate with AngularJS ngAnimation .ng-enter .ng-enter.ng-enter-active .ng-leave .ng-leave.ng-leave-active
14. 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 }
15. 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% }
16. ng-trans.css demo http://minipai.github.io/ng-trans.css/
17. Thank You