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
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
Fireside Chat
paigeccino
34
3.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Automating Front-end Workflow
addyosmani
1367
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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)