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
600
Design with AngularJS
minipai
1
350
un-semantic CSS
minipai
3
400
A Web Designer in Dev Team
minipai
5
480
Backbone Revolution
minipai
13
2.2k
Other Decks in Programming
See All in Programming
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
What We Can Learn From OSS
inouehi
0
400
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
Milestoner
bkuhlmann
1
400
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
280
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
180
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
39
18k
Elm 0.19.0 Changes
bkuhlmann
0
480
Folding Cheat Sheet #3
philipschwarz
PRO
0
110
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
2
200
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
132
6.2k
Writing Fast Ruby
sferik
620
60k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Code Reviewing Like a Champion
maltzj
513
39k
GraphQLとの向き合い方2022年版
quramy
31
12k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
How to train your dragon (web standard)
notwaldorf
72
5.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
The Cult of Friendly URLs
andyhume
74
5.7k
Adopting Sorbet at Scale
ufuk
67
8.6k
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