Angular Material Overview

Presented to NashJS in Nashville, TN on May 13, 2015

Transcript

1. Angular Material NashJS 2015 Angular Material Overview nathanleclaire.com
2. Angular Material NashJS 2015
3. Angular Material NashJS 2015
4. Angular Material NashJS 2015 Drew Butler github.com/abutler3 twitter.com/drew_butler
5. Angular Material NashJS 2015 Drew Butler github.com/abutler3 twitter.com/drew_butler
6. Angular Material NashJS 2015 Material Design Agenda
7. Angular Material NashJS 2015 Material Design Integration with AngularJS Agenda
8. Angular Material NashJS 2015 How to implement Integration with AngularJS Material Design Agenda
9. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Agenda
10. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Agenda
11. 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
12. Angular Material NashJS 2015 Material Design Develop a single underlying system that allows for a unified experience across platforms and device sizes. - Google
13. Angular Material NashJS 2015 Material Design WAIT
14. Angular Material NashJS 2015 Material Design WAIT So, it’s Google’s version of Bootstrap
15. Angular Material NashJS 2015 Material Design WAIT So, it’s Google’s version of Bootstrap Right?
16. Angular Material NashJS 2015 Material Design Well, It makes your web app responsive, while provide some default look and feel for your pages
17. Angular Material NashJS 2015 Material Design Oh So it is like Bootstrap
18. Angular Material NashJS 2015 Material Design Oh So it is like Bootstrap
19. Angular Material NashJS 2015 Material Design Kinda sorta
20. Angular Material NashJS 2015 gmail ========>
21. Angular Material NashJS 2015 google maps ========>
22. Angular Material NashJS 2015
23. Angular Material NashJS 2015 material uses flexbox (display: flex) vs the standard bootstrap (display: inline, block, inline-block) Like Bootstrap…
24. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Agenda
26. http://material.angularjs.org
27. Angular Material NashJS 2015 Integration with AngularJS AngularJS DI Services Modules Data Binding Standard Directives Animations Data-aware Components
28. 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
29. Angular Material NashJS 2015 Integration with AngularJS
30. Angular Material NashJS 2015 Integration with AngularJS Two things to note: version 1.3 and later
31. Angular Material NashJS 2015 Integration with AngularJS
32. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Agenda
33. Angular Material NashJS 2015 bower install angular- material How to implement
34. 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
35. Angular Material NashJS 2015 angular.module(‘FoodApp’, []); How to implement
36. Angular Material NashJS 2015 angular.module(‘FoodApp’, [‘ngMaterial’]); How to implement
37. Angular Material NashJS 2015 http://materialdesignblog.com/upcoming-material-design-css-library-a-twitter-bootstrap-killer/ How to implement
38. Angular Material NashJS 2015 How to implement
39. Angular Material NashJS 2015 How to implement
40. Angular Material NashJS 2015 How to implement
41. Angular Material NashJS 2015 How to implement
42. Angular Material NashJS 2015 How to implement
43. Angular Material NashJS 2015 Recipe App Demo How to implement
44. Angular Material NashJS 2015 How to implement
45. Angular Material NashJS 2015 How to implement
46. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Agenda
47. 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
48. Angular Material NashJS 2015 Material Design Integration with AngularJS How to implement What to watch out for Review
49. Angular Material NashJS 2015 https://github.com/angular/material
50. 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)