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
640
Design with AngularJS
minipai
1
370
un-semantic CSS
minipai
3
420
A Web Designer in Dev Team
minipai
5
480
Backbone Revolution
minipai
13
2.2k
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
sappoRo.R #12 初心者セッション
kosugitti
0
230
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
BBQ
matthewcrist
86
9.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Writing Fast Ruby
sferik
628
61k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
A better future with KSS
kneath
238
17k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Docker and Python
trallard
44
3.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.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