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

Angular.js for Designers

Avatar for Art Pai Art Pai
November 06, 2013

Angular.js for Designers

How AngularJS can used to build interactive websites in a designer's point of view.

Avatar for Art Pai

Art Pai

November 06, 2013
Tweet

More Decks by Art Pai

Other Decks in Programming

Transcript

  1. AngularJS is for Designer The goal was to enable web-designers

    (non-programmers) to build simple app like websites, …
 
 —Misko Hevery, creator of AngularJS
  2. The JavaScript ★ foo = true ★ foo = "bar"

    ★ foo = {key: value} ★ foo = ! foo ★ foo == 10
  3. 1. Drop down menu ★ You want to make a

    drop down menu — a element that toggles another element
  4. 1. Drop down menu <a class="btn" ng-click="showList=!showList">Action</a> ! <ul class="list-group"

    ng-show="showList"> <li class=“list-group-item”> list item </li> … </ul>
  5. 2. Tab ★ You want to make a tab —

    a set of elements each toggles an element
  6. 2. Tab <ul class="nav nav-tabs" ng-init="tabIndex=1"> <li ng-class="{active: index==1}" ng-click="index=1">

    <a href="#">Home</a></li> <li ng-class="{active: index==2}" ng-click="index=2"> <a href="#">Profile</a></li> <li ng-class="{active: index==3}" ng-click="index=3"> <a href="#">Messages</a></li> </ul> <div class="tabs"> <div class="tab-pane" ng-show="index==1">…</div> <div class="tab-pane" ng-show="index==2">…</div> <div class="tab-pane" ng-show="index==3">…</div> </div>
  7. 3. Single Page ★ You want to make a single

    page design — ajax load page by link
  8. 3. Single Page ! <nav class="navbar"> <ul class="nav" ng-init=" page='home'

    "> <li ng-class="{active: page=='home' }"> <a href="#" ng-click=" page='home' ">Home</a></li> <li ng-class="{active: page=='about' }"> <a href="#" ng-click=" page='about'">About</a></li> <li ng-class="{active: page=='blog' }"> <a href="#" ng-click=" page=‘blog' ">blog</a></li> </ul> </nav> <div id="content" ng-include=" page + '.html' "></div>
  9. 4. Lightbox ★ You want to make a light-box —

    ajax load content of light-box — click toggle display of light-box
  10. 4. Light-box <button ng-click="showModal=true; modalUrl='m1.html'; modalTitle='Something happen' ">Show Modal 1</button>

    ! <button ng-click="showModal=true; modalUrl=‘m2.html'; modalTitle='Show me the money' ">Show Modal 2</button> <div class="modal" ng-show="showModal"> <h4 class="modal-title" >{{ modalTitle }}</h4> <div class="modal-body" ng-include="modalUrl"></div> <button ng-click="showModal=false">Close</button> </div> ! <div class="modal-backdrop" ng-show="showModal"></div>
  11. Summary ★ jQuery — Abstraction of DOM API — You

    manipulate DOM manually ★ AngularJS — Abstraction of DOM manipulation — Let data manipulate DOM for you
  12. END