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
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
610
CSC509 Lecture 06
javiergs
PRO
0
240
CSC509 Lecture 02
javiergs
PRO
0
410
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
330
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
460
CSC305 Lecture 04
javiergs
PRO
0
250
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
970
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
140
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
開発生産性を上げるための生成AI活用術
starfish719
1
180
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Faster Mobile Websites
deanohume
310
31k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Become a Pro
speakerdeck
PRO
29
5.5k
Why Our Code Smells
bkeepers
PRO
339
57k
Producing Creativity
orderedlist
PRO
347
40k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
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