Kotaru Material Design Implementation with AngularJS

UI Component Framework
1. ed
ISBN: 978-1-4842-2190-7
Verlag: Apress
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Englisch, 204 Seiten

This book is about building high-quality web and mobile user interfaces (UI) that are interactive, fluid, and provide a consistent experience across devices from desktops to tablets to smartphones.Use a Material Design approach to position elements and create animations along with principles of the sophisticated AngularJS JavaScript framework. Take advantage of Angular Material, a UI component framework that works out of the box to design web pages that adapt to various screen sizes and adhere to Material Design specifications.This book teaches you how to:Develop a UI that adheres to Material Design principles using Angular Material, a UI component frameworkUse various Angular Material elements, directives, and services in conjunction with CSS3 Flexbox for layout managementUse best practice design techniques to develop a responsive UI to fit multiple devices and screen sizes from desktop to tablet to mobile phoneDevelop web apps for both mobile and desktop form factors and screen sizes using HTML, CSS, and JavaScript

Keerti Kotaru has been associated with various software development projects for fourteen 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.He has Masters in Software Systems from University of St. Thomas, Minneapolis / St. Paul, USA.Keerti Kotaru is a regular speaker and organizer for AngularJS Hyderabad Meetup group. He is involved in technology activities and events for Google Developer Groups (GDG) Hyderabad. Presented multiple sessions for this group, including at annual events DevFest 2014 and DevFest 2015. He has also presented sessions for TechGig, AngularJS Pune and AngularJS Chicago meetup groups.

Autoren/Hrsg.

Kotaru, V. Keerti

Inhaltsverzeichnis

1;Contents at a Glance;6
2;Contents;8
3;About the Author;14
4;About the Technical Reviewer;16
5;Acknowledgments;18
6;Chapter 1: Introduction to Angular Material;19
6.1;Scenarios;19
6.2;More Power, More Responsibility;20
6.3;What Is Material Design?;21
6.4;Why Material Design?;21
6.5;Why Angular Material?;22
6.6;Angular Material Basics;22
6.6.1;Theming;22
6.6.2;Layout;22
6.6.3;Typography;23
6.6.4;Directives and Services;23
7;Chapter 2: Getting Started;24
7.1;Scripts;24
7.2;Code Editor/Integrated Development Environment (IDE);25
7.3;Get Started with Angular Material;25
7.3.1;Step 1: Code “Hello World—Angular Material”;25
7.3.2;Step 2: Set up a developer class web server and run the sample;27
7.3.2.1;Option A: Live Server;27
7.3.2.1.1;Run the app;27
7.3.2.2;Option B: Serve;28
7.3.2.2.1;Run the app;28
7.3.2.3;Option C: IIS Express;29
7.3.2.3.1;Run the app;29
7.4;Working with Code Samples;30
7.4.1;Run Samples;30
7.4.2;Folder Structure;30
7.5;AngularJS Basics;31
7.5.1;Data Binding;32
7.5.2;Directive;33
7.5.3;AngularJS Module;33
7.5.4;DI;33
7.5.5;Controller;34
7.5.6;View / HTML template;34
7.5.7;Services;35
7.5.8;Provider;35
7.5.9;Making the Code Minification Safe;36
7.6;Pakage Managers and JavaScript Modules;37
7.6.1;Setup Node Package Manager - NPM;37
7.6.1.1;Download Angular Material using NPM;37
7.6.1.1.1;Reference scripts;38
7.6.1.2;Download Angular Material using Bower;38
7.6.1.2.1;Reference scripts;39
7.6.1.3;SystemJS & JSPM (JavaScript Package Manager);40
7.6.1.3.1;Code “Hello World—Angular Material”;41
7.7;Limit Scope Using Closure;42
7.7.1;Notes on ES2015 (Also Called ES6);44
7.8;Summary;44
7.9;References;44
8;Chapter 3: Layout Management;45
8.1;Flexbox;45
8.2;Layout;45
8.2.1;Layout-Align;47
8.2.2;More Layout Attributes;48
8.3;Flex;48
8.4;Responsive Design;50
8.4.1;Real Estate;50
8.4.2;Feedback for User Actions;50
8.4.3;Breakpoints;51
8.4.4;Show/Hide;53
8.4.5;Responsive Layout;54
8.5;Summary;55
8.6;References;56
9;Chapter 4: Navigation & Container Elements;57
9.1;Content (md-content);57
9.1.1;Usage;58
9.1.2;Toolbar (md-toolbar);58
9.1.2.1;Usage;58
9.1.3;Sidenav (md-sidenav);60
9.1.3.1;Basic Usage;60
9.1.3.2;Sidenav Along with the Content;61
9.1.3.3;Show/Hide Sidenav On Demand;62
9.1.3.4;Responsive—Show/Hide Sidenav Based on Screen Width;63
9.1.3.5;$mdSidenav Service;63
9.1.4;Tabs;63
9.1.4.1;Usage;64
9.1.4.2;md-tab;67
9.1.4.2.1;Attributes:;68
9.1.5;Cards;69
9.2;Summary;72
9.3;References;72
10;Chapter 5: Action Buttons;73
10.1;Button Directive (md-button);73
10.1.1;Style and Intention;74
10.2;FAB;76
10.2.1;Speed Dial;78
10.2.1.1;md-fab-speed-dial;79
10.2.1.2;md-fab-trigger;80
10.2.1.3;md-fab-actions;80
10.2.2;FAB Toolbar;82
10.2.2.1;md-fab-toolbar (Directive);82
10.2.2.2;Usage;83
10.3;Menu;84
10.3.1;Alignment;86
10.3.2;Wider Menu Options;88
10.3.3;Separator;88
10.3.4;Menu Bar;89
10.4;Summary;92
10.5;References;92
11;Chapter 6: Themes;93
11.1;Angular Material Theming;93
11.1.1;Palette;93
11.2;Basic Usage;95
11.2.1;Shade or Hue;97
11.3;Customize Themes;97
11.3.1;Define a New Theme;100
11.3.2;Hue Configuration;102
11.4;Create Custom Palette;103
11.5;Summary;104
11.6;References;105
12;Chapter 7: Forms;106
12.1;Input Container Directive;106
12.1.1;Usage;106
12.1.2;Form Validations;107
12.1.2.1;Max Length Validation;108
12.1.2.2;E-mail Address Validation;109
12.1.2.3;RegEx Validation;109
12.1.2.4;Multiple Validation Messages;110
12.2;More Form Elements;110
12.2.1;Drop-down;110
12.2.1.1;Dynamically Retrieve Drop-down Options;112
12.2.1.2;More Options;113
12.2.2;Autocomplete Drop-down;114
12.2.2.1;Highlight the Filter Results;115
12.2.2.2;More Options;115
12.2.3;Chips;116
12.2.3.1;Transform Chips;117
12.2.3.2;Custom Templates;118
12.2.4;Contact Chips;119
12.2.5;Radio Buttons;120
12.2.6;Check Box;121
12.2.7;Slider;122
12.2.8;Date Picker;122
12.3;Summary;126
12.4;References;126
13;Chapter 8: Lists and Alerts;127
13.1;List;127
13.2;Grid List;131
13.2.1;Grid List Element (md-grid-list);132
13.2.2;Grid Tile Directive (md-grid-tile);132
13.2.3;Responsive Attributes;134
13.3;Alerts and Dialogs;135
13.3.1;md-dialog Element;137
13.3.1.1;Pass Values to the Dialog;138
13.3.2;Alert Dialog;138
13.3.2.1;Show the Alert;139
13.3.2.2;Hide the Alert;140
13.3.3;Confirm Dialog;140
13.3.3.1;Show the Confirm Dialog;142
13.3.3.2;Hide the Dialog Box;142
13.4;Toast;142
13.4.1;Basic Customizations;144
13.4.1.1;Additional Options with simple() API;145
13.4.2;Advanced Customizations;146
13.4.2.1;Configure a Controller;146
13.4.2.2;Hide a Toast Message;146
13.4.2.3;Position a Toast Message;147
13.4.2.4;Show with Options;149
13.5;Summary;149
13.6;References;150
14;Chapter 9: Mobile-Friendly Elements;151
14.1;Bottom Sheet;151
14.1.1;Bottom Sheet—List View;152
14.1.2;Bottom Sheet—Grid View;155
14.1.3;Handle Bottom Sheet Actions;156
14.2;Swipe;159
14.3;Summary;161
14.4;References;161
15;Chapter 10: Miscellaneous—Icons and ARIA;162
15.1;Icons;162
15.1.1;Icon Fonts;163
15.1.1.1;Using Material Design Icons (CDN Option);163
15.1.1.2;Using Material Design Icons (with Files on Your Server);163
15.1.1.3;Using Custom Icons;164
15.1.2;Using SVGs for Icons;165
15.1.2.1;Angular Material Icon Sets;165
15.1.2.2;Additional Icon Sets;166
15.1.3;Preload Individual Icons;167
15.1.4;Font Sets;168
15.2;ARIA;169
15.3;Summary;170
15.4;References;170
16;Chapter 11: Miscellaneous;171
16.1;Whiteframe;171
16.2;Tooltip;172
16.3;Subheader;173
16.3.1;Usage;174
16.3.2;Divider;174
16.3.2.1;Usage;174
16.4;Progress Bar;174
16.4.1;Linear Progress Bar;175
16.4.2;Circular Progress Bar;176
16.5;Summary;177
16.6;References;177
17;Chapter 12: Responsive Design Patterns;178
17.1;Reflow;178
17.2;Position;181
17.3;Transform;186
17.4;Reveal;190
17.4.1;Reveal—Toolbar Actions Example;191
17.4.1.1;Hide/Show Buttons on Toolbar;193
17.4.1.2;Hide/Show Buttons on the Menu;195
17.5;Summary;197
17.6;References;198
18;Index;199