Material Design implementation with AngularJS: UI Component Framework

204 Pages·2016·9.03 MB·English

by  V. Keerti Kotaru (auth.)

Material Design
implementation
with AngularJS
—
V. Keerti Kotaru
Material Design
Implementation with
AngularJS

UI Component Framework
First Edition

V. Keerti Kotaru
Material Design Implementation with AngularJS
V. Keerti Kotaru
Hyderabad, Andhra Pradesh, India
ISBN-13 (pbk): 978-1-4842-2189-1 ISBN-13 (electronic): 978-1-4842-2190-7
DOI 10.1007/978-1-4842-2190-7
Library of Congress Control Number: 2016950454
Copyright © 2016 by V. Keerti Kotaru
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part
of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations,
recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission
or information storage and retrieval, electronic adaptation, computer software, or by similar or
dissimilar methodology now known or hereafter developed.
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility
for any errors or omissions that may be made. The publisher makes no warranty, express or implied,
with respect to the material contained herein.
Managing Director: Welmoed Spahr
Lead Editor: Pramila Balan
Technical Reviewer: Sathish VJ
Editorial Board: Steve Anglin, Pramila Balan, Laura Berendson, Aaron Black, Louise Corrigan,
Jonathan Gennick, Robert Hutchinson, Celestin Suresh John, Nikhil Karkal, James Markham,
Susan McDermott, Matthew Moodie, Natalie Pao, Gwenan Spearing
Coordinating Editor: Prachi Mehta
Copy Editor: Brendan Frost
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax [phone],
e-mail o [email protected] , or visit w ww.springeronline.com . Apress Media, LLC is a
California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc
(SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected] , or visit w ww.apress.com .
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional
use. eBook versions and licenses are also available for most titles. For more information, reference our
Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales .
Any source code or other supplementary materials referenced by the author in this text are available
to readers at w ww.apress.com . For detailed information about how to locate your book’s source code,
go to www.apress.com/source-code/ . Readers can also access source code at SpringerLink in the
Supplementary Material section for each chapter.
Printed on acid-free paper
I dedicate the book to my true support system, my parents,
Lakshmi and Rama Rao, and my wife, Sowmya.

Contents at a Glance
About the Author ............................................................................xiii
About the Technical Reviewer .........................................................xv
Acknowledgments .........................................................................xvii
■ Chapter 1: Introduction to Angular Material ..................................1
■ Chapter 2: Getting Started ..............................................................7
■ Chapter 3: Layout Management ....................................................29
■ Chapter 4: Navigation & Container Elements ...............................41
■ Chapter 5: Action Buttons ............................................................57
■ Chapter 6: Themes ........................................................................77
■ Chapter 7: Forms ..........................................................................91
■ Chapter 8: Lists and Alerts .........................................................113
■ Chapter 9: Mobile-Friendly Elements .........................................137
■ Chapter 10: Miscellaneous—Icons and ARIA .............................149
■ Chapter 11: Miscellaneous .........................................................159
■ Chapter 12: Responsive Design Patterns ....................................167
Index ..............................................................................................189
v

Contents
About the Author ............................................................................xiii
About the Technical Reviewer .........................................................xv
Acknowledgments .........................................................................xvii
■ Chapter 1: Introduction to Angular Material ..................................1
Scenarios ................................................................................................1
More Power, More Responsibility ............................................................2
What Is Material Design? ........................................................................2
Why Material Design? .............................................................................3
Why Angular Material? ............................................................................3
Angular Material Basics: .........................................................................4
Theming ....................................................................................................................4
Layout .......................................................................................................................4
Typography ...............................................................................................................4
Directives and Services ............................................................................................5
■ Chapter 2: Getting Started ..............................................................7
Scripts .....................................................................................................7
Code Editor/Integrated Development Environment (IDE) .........................8
Get Started with Angular Material ...........................................................8
Step 1: Code “Hello World—Angular Material” ........................................................8
Step 2: Set up a developer class web server and run the sample .........................10
vii
■ CONTENTS
Working with Code Samples .................................................................13
Run Samples ..........................................................................................................13
Folder Structure ......................................................................................................13
AngularJS Basics ..................................................................................14
Data Binding ...........................................................................................................15
Directive .................................................................................................................16
AngularJS Module ..................................................................................................16
DI ............................................................................................................................16
Controller ................................................................................................................17
View/HTML template ..............................................................................................17
Services ..................................................................................................................18
Provider ..................................................................................................................18
Making the Code Minifi cation Safe .........................................................................19
Pakage Managers and JavaScript Modules ..........................................20
Setup Node Package Manager - NPM ....................................................................20
Download Angular Material using NPM ..................................................................20
Download Angular Material using Bower ...............................................................21
SystemJS & JSPM (JavaScript Package Manager) ................................................23
Notes on ES2015 (Also Called ES6) ........................................................................27
Summary ...............................................................................................27
References ............................................................................................27
■ Chapter 3: Layout Management ....................................................29
Flexbox ..................................................................................................29
Layout ....................................................................................................29
Layout-Align ...........................................................................................................31
More Layout Attributes ...........................................................................................32
Flex ........................................................................................................32
Responsive Design ................................................................................34
Real Estate ..............................................................................................................34
viii
■ CONTENTS
Feedback for User Actions ......................................................................................34
Breakpoints ............................................................................................................35
Show/Hide ..............................................................................................................37
Responsive Layout ..................................................................................................38
Summary ...............................................................................................39
References ............................................................................................40
■ Chapter 4: Navigation & Container Elements ...............................41
Content (md-content) ............................................................................41
Usage ......................................................................................................................42
Toolbar (md-toolbar) ...............................................................................................42
Sidenav (md-sidenav) .............................................................................................44
Tabs ........................................................................................................................47
Cards ......................................................................................................................53
Summary ...............................................................................................56
References ............................................................................................56
■ Chapter 5: Action Buttons ............................................................57
Button Directive (md-button) .................................................................57
Style and Intention ..................................................................................................58
FAB ........................................................................................................60
Speed Dial ..............................................................................................................62
FAB Toolbar .............................................................................................................66
Menu .....................................................................................................68
Alignment ...............................................................................................................70
Wider Menu Options ...............................................................................................72
Separator ................................................................................................................72
Menu Bar ................................................................................................................73
Summary ...............................................................................................76
References ............................................................................................76
ix