Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular.js for Designers
Search
Art Pai
November 06, 2013
Programming
9
2.7k
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
Share
More Decks by Art Pai
See All by Art Pai
網頁設計,是你認為的好工作?—馬克思主義的觀點
minipai
1
660
Design with AngularJS
minipai
1
400
un-semantic CSS
minipai
3
430
A Web Designer in Dev Team
minipai
5
490
Backbone Revolution
minipai
13
2.2k
Other Decks in Programming
See All in Programming
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
120
TDD 実践ミニトーク
contour_gara
1
290
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
560
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Invisible Side of Design
smashingmag
301
51k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
A designer walks into a library…
pauljervisheath
207
24k
Six Lessons from altMBA
skipperchong
28
4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Automating Front-end Workflow
addyosmani
1370
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Transcript
AngularJS for Designer
None
@minipai
Why AngularJS
AngularJS is for Designer The goal was to enable web-designers
(non-programmers) to build simple app like websites, … —Misko Hevery, creator of AngularJS
The JavaScript ★ foo = true ★ foo = "bar"
★ foo = {key: value} ★ foo = ! foo ★ foo == 10
Learn AngularJS
1. Drop down menu ★ You want to make a
drop down menu — a element that toggles another element
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>
2. Tab ★ You want to make a tab —
a set of elements each toggles an element
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>
3. Single Page ★ You want to make a single
page design — ajax load page by link
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>
4. Lightbox ★ You want to make a light-box —
ajax load content of light-box — click toggle display of light-box
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>
Summary ★ jQuery — Abstraction of DOM API — You
manipulate DOM manually ★ AngularJS — Abstraction of DOM manipulation — Let data manipulate DOM for you
END