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

Angular.js for Designers

Art Pai
November 06, 2013

Angular.js for Designers

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

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