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
390
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
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
690
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
240
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
210
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
AI Ramen Fight
yusukebe
0
110
NEWT Backend Evolution
xpromx
1
150
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Ace a Technical Interview
jacobian
278
23k
BBQ
matthewcrist
89
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Orchestrator
shlominoach
189
11k
Producing Creativity
orderedlist
PRO
346
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Speed Design
sergeychernyshev
32
1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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