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 Material Overview
Search
Andrew Butler
May 13, 2015
Programming
0
72
Angular Material Overview
Presented to NashJS in Nashville, TN on May 13, 2015
Andrew Butler
May 13, 2015
Tweet
Share
More Decks by Andrew Butler
See All by Andrew Butler
Cut Your Own Gems
abutler3
0
59
Other Decks in Programming
See All in Programming
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
時計仕掛けのCompose
mkeeda
1
280
Software Architecture
hschwentner
6
2.1k
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Open source software: how to live long and go far
gaelvaroquaux
0
620
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Being A Developer After 40
akosma
89
590k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A Modern Web Designer's Workflow
chriscoyier
693
190k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Cult of Friendly URLs
andyhume
78
6.2k
Transcript
Angular Material NashJS 2015 Angular Material Overview nathanleclaire.com
Angular Material NashJS 2015
Angular Material NashJS 2015
Angular Material NashJS 2015 Drew Butler github.com/abutler3 twitter.com/drew_butler
Angular Material NashJS 2015 Drew Butler github.com/abutler3 twitter.com/drew_butler
Angular Material NashJS 2015 Material Design Agenda
Angular Material NashJS 2015 Material Design Integration with AngularJS Agenda
Angular Material NashJS 2015 How to implement Integration with AngularJS
Material Design Agenda
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Agenda
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Agenda
Angular Material NashJS 2015 Material Design Create a visual language
that synthesizes classic principles of good design with the innovation and possibility of technology and science. - Google
Angular Material NashJS 2015 Material Design Develop a single underlying
system that allows for a unified experience across platforms and device sizes. - Google
Angular Material NashJS 2015 Material Design WAIT
Angular Material NashJS 2015 Material Design WAIT So, it’s Google’s
version of Bootstrap
Angular Material NashJS 2015 Material Design WAIT So, it’s Google’s
version of Bootstrap Right?
Angular Material NashJS 2015 Material Design Well, It makes your
web app responsive, while provide some default look and feel for your pages
Angular Material NashJS 2015 Material Design Oh So it is
like Bootstrap
Angular Material NashJS 2015 Material Design Oh So it is
like Bootstrap
Angular Material NashJS 2015 Material Design Kinda sorta
Angular Material NashJS 2015 gmail ========>
Angular Material NashJS 2015 google maps ========>
Angular Material NashJS 2015
Angular Material NashJS 2015 material uses flexbox (display: flex) vs
the standard bootstrap (display: inline, block, inline-block) Like Bootstrap…
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Agenda
None
http://material.angularjs.org
Angular Material NashJS 2015 Integration with AngularJS AngularJS DI Services
Modules Data Binding Standard Directives Animations Data-aware Components
Angular Material NashJS 2015 Integration with AngularJS AngularJS DI Services
Modules Data Binding Standard Directives Animations Data-aware Components Angular Material Design Themes Flexbox ARIA Support UX Effects UI Components AngularJS
Angular Material NashJS 2015 Integration with AngularJS
Angular Material NashJS 2015 Integration with AngularJS Two things to
note: version 1.3 and later
Angular Material NashJS 2015 Integration with AngularJS
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Agenda
Angular Material NashJS 2015 bower install angular- material How to
implement
Angular Material NashJS 2015 https://ajax.googleapis.com/ajax/libs/ angular_material/0.9.0/angular-material.min.js <script src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.3.15/angular.min.js"></script> <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.3.15/angular-aria.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/ libs/angular_material/0.9.0/angular-material.min.css"> How to implement
Angular Material NashJS 2015 angular.module(‘FoodApp’, []); How to implement
Angular Material NashJS 2015 angular.module(‘FoodApp’, [‘ngMaterial’]); How to implement
Angular Material NashJS 2015 http://materialdesignblog.com/upcoming-material-design-css-library-a-twitter-bootstrap-killer/ How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 Recipe App Demo How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 How to implement
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Agenda
Angular Material NashJS 2015 What to watch out for still
in beta no legacy IE support (look into the new CSS based material design from Google) not recommended for production projects-yet
Angular Material NashJS 2015 Material Design Integration with AngularJS How
to implement What to watch out for Review
Angular Material NashJS 2015 https://github.com/angular/material
Angular Material NashJS 2015 Links to Slides and sample projects:
Find links here: @drew_butler Sample Project - http://bit.ly/md-recipes Slides - bit.ly/md-nashjs Sources: @louiswilbrink, material.angularjs.org, Build an Angular Material App - (https://youtu.be/Qi31oO5u33U)