Material Design Implementation with AngularJS (eBook)

eerti Kotaru has been associated with various software development projects for 14 years. He has acquired knowledge and expertise architecting, designing, and developing Web and Mobile Applications. In recent times he has used AngularJS and related JavaScript technologies extensively. Keerti has a Master in Software Systems degree from the University of St. Thomas, Minneapolis/St. Paul, USA.Keerti Kotaru is a regular speaker and organizer for the AngularJS Hyderabad Meetup group. He is involved in technology activities and events for Google Developer Groups (GDG) Hyderabad. He has presented multiple sessions for this group, including at annual events DevFest 2014 and DevFest 2015. Keerti has also presented sessions for TechGig, AngularJS Pune and AngularJS Chicago meetup groups.

Contents at a Glance 6
Contents 8
About the Author 14
About the Technical Reviewer 16
Acknowledgments 18
Chapter 1: Introduction to Angular Material 19
Scenarios 19
More Power, More Responsibility 20
What Is Material Design? 21
Why Material Design? 21
Why Angular Material? 22
Angular Material Basics 22
Theming 22
Layout 22
Typography 23
Directives and Services 23
Chapter 2: Getting Started 24
Scripts 24
Code Editor/Integrated Development Environment (IDE) 25
Get Started with Angular Material 25
Step 1: Code “Hello World—Angular Material” 25
Step 2: Set up a developer class web server and run the sample 27
Option A: Live Server 27
Run the app 27
Option B: Serve 28
Run the app 28
Option C: IIS Express 29
Run the app 29
Working with Code Samples 30
Run Samples 30
Folder Structure 30
AngularJS Basics 31
Data Binding 32
Directive 33
AngularJS Module 33
DI 33
Controller 34
View / HTML template 34
Services 35
Provider 35
Making the Code Minification Safe 36
Pakage Managers and JavaScript Modules 37
Setup Node Package Manager - NPM 37
Download Angular Material using NPM 37
Reference scripts 38
Download Angular Material using Bower 38
Reference scripts 39
SystemJS & JSPM (JavaScript Package Manager)
Code “Hello World—Angular Material” 41
Limit Scope Using Closure 42
Notes on ES2015 (Also Called ES6) 44
Summary 44
References 44
Chapter 3: Layout Management 45
Flexbox 45
Layout 45
Layout-Align 47
More Layout Attributes 48
Flex 48
Responsive Design 50
Real Estate 50
Feedback for User Actions 50
Breakpoints 51
Show/Hide 53
Responsive Layout 54
Summary 55
References 56
Chapter 4: Navigation & Container Elements
Content (md-content) 57
Usage 58
Toolbar (md-toolbar) 58
Usage 58
Sidenav (md-sidenav) 60
Basic Usage 60
Sidenav Along with the Content 61
Show/Hide Sidenav On Demand 62
Responsive—Show/Hide Sidenav Based on Screen Width 63
$mdSidenav Service 63
Tabs 63
Usage 64
md-tab 67
Attributes: 68
Cards 69
Summary 72
References 72
Chapter 5: Action Buttons 73
Button Directive (md-button) 73
Style and Intention 74
FAB 76
Speed Dial 78
md-fab-speed-dial 79
md-fab-trigger 80
md-fab-actions 80
FAB Toolbar 82
md-fab-toolbar (Directive) 82
Usage 83
Menu 84
Alignment 86
Wider Menu Options 88
Separator 88
Menu Bar 89
Summary 92
References 92
Chapter 6: Themes 93
Angular Material Theming 93
Palette 93
Basic Usage 95
Shade or Hue 97
Customize Themes 97
Define a New Theme 100
Hue Configuration 102
Create Custom Palette 103
Summary 104
References 105
Chapter 7: Forms 106
Input Container Directive 106
Usage 106
Form Validations 107
Max Length Validation 108
E-mail Address Validation 109
RegEx Validation 109
Multiple Validation Messages 110
More Form Elements 110
Drop-down 110
Dynamically Retrieve Drop-down Options 112
More Options 113
Autocomplete Drop-down 114
Highlight the Filter Results 115
More Options 115
Chips 116
Transform Chips 117
Custom Templates 118
Contact Chips 119
Radio Buttons 120
Check Box 121
Slider 122
Date Picker 122
Summary 126
References 126
Chapter 8: Lists and Alerts 127
List 127
Grid List 131
Grid List Element (md-grid-list) 132
Grid Tile Directive (md-grid-tile) 132
Responsive Attributes 134
Alerts and Dialogs 135
md-dialog Element 137
Pass Values to the Dialog 138
Alert Dialog 138
Show the Alert 139
Hide the Alert 140
Confirm Dialog 140
Show the Confirm Dialog 142
Hide the Dialog Box 142
Toast 142
Basic Customizations 144
Additional Options with simple() API 145
Advanced Customizations 146
Configure a Controller 146
Hide a Toast Message 146
Position a Toast Message 147
Show with Options 149
Summary 149
References 150
Chapter 9: Mobile-Friendly Elements 151
Bottom Sheet 151
Bottom Sheet—List View 152
Bottom Sheet—Grid View 155
Handle Bottom Sheet Actions 156
Swipe 159
Summary 161
References 161
Chapter 10: Miscellaneous—Icons and ARIA 162
Icons 162
Icon Fonts 163
Using Material Design Icons (CDN Option) 163
Using Material Design Icons (with Files on Your Server) 163
Using Custom Icons 164
Using SVGs for Icons 165
Angular Material Icon Sets 165
Additional Icon Sets 166
Preload Individual Icons 167
Font Sets 168
ARIA 169
Summary 170
References 170
Chapter 11: Miscellaneous 171
Whiteframe 171
Tooltip 172
Subheader 173
Usage 174
Divider 174
Usage 174
Progress Bar 174
Linear Progress Bar 175
Circular Progress Bar 176
Summary 177
References 177
Chapter 12: Responsive Design Patterns 178
Reflow 178
Position 181
Transform 186
Reveal 190
Reveal—Toolbar Actions Example 191
Hide/Show Buttons on Toolbar 193
Hide/Show Buttons on the Menu 195
Summary 197
References 198
Index 199