Skip to main content
Top

2016 | Book

Material Design implementation with AngularJS

UI Component Framework

insite
SEARCH

About this book

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

Table of Contents

Frontmatter
Chapter 1. Introduction to Angular Material
Abstract
Web application development has evolved in recent years. Earlier JavaScript was primarily used for form validations; to check if user provided data in required form fields or if a phone number followed a pattern and so on. With the advent of Ajax, integration with services (on server) is possible without reloading the whole page. Due to more powerful client machines and browsers, rich front-end development is done with JavaScript, HTML, and CSS.
V. Keerti Kotaru
Chapter 2. Getting Started
Abstract
This chapter discusses multiple options for getting started with a project based on Angular Material. Along with referencing Angular Material and AngularJS JavaScript libraries, the chapter will elaborate on development environment setup, package manager options, and so on. In addition, the chapter will focus on setting up the environment for ES5 as well as ES2015 (ES6). The approaches described in the chapter should help a medium or large project setup.
V. Keerti Kotaru
Chapter 3. Layout Management
Abstract
In this chapter, we will explore layout management and styling aspects. The focus of this chapter will be markup or templates. We will also explore aspects of responsive design and adjusting view and screen content based on screen resolution.
V. Keerti Kotaru
Chapter 4. Navigation & Container Elements
Abstract
This chapter will detail some more Angular Material directives. We will primarily deal with navigation and container elements. This chapter helps build the skeleton for the application.
V. Keerti Kotaru
Chapter 5. Action Buttons
Abstract
Angular Material provides variety of action buttons. The directives or elements define Material Design style, behavior, and experience. From a developer point of view, they are easy to integrate within a web application.
V. Keerti Kotaru
Chapter 6. Themes
Abstract
Themes provide consistency in look and feel. A theme is defined by set of colors and shades.
V. Keerti Kotaru
Chapter 7. Forms
Abstract
This chapter will detail various Angular Material input controls and directives. Beginning with simple input text boxes, it will delve into many elements like sliders, drop-down, radio buttons, and so on. Validations are an important aspect of working with forms in a web application. This chapter details various out-of-the-box features for checking form validity and pattern matching. It explains options in displaying and highlighting errors to the user.
V. Keerti Kotaru
Chapter 8. Lists and Alerts
Abstract
In this chapter, we will explore some more Angular Material directives and services. We will begin with list and grid list. They are quite effective controls to represent complex data. The controls are easy to use and are highly configurable. They provide flexibility in look-and-feel and functionality.
V. Keerti Kotaru
Chapter 9. Mobile-Friendly Elements
Abstract
Some of the controls and elements provided by Angular Material are very relevant on a mobile device. Technically, there is nothing stopping these controls from being used on a bigger screen, like a laptop or a desktop. However, they are designed to look better and more usable on a mobile device. Let us have a look at some of those controls.
V. Keerti Kotaru
Chapter 10. Miscellaneous—Icons and ARIA
Abstract
In this chapter, let us explore two important features of Angular Material. We will begin by looking at options for using icons in an application. Angular Material provides API, directives, and services to effectively download and show icons in an application. We will explore using SVGs and fonts for Icons.
V. Keerti Kotaru
Chapter 11. Miscellaneous
Abstract
The following are some useful miscellaneous elements and attributes in Angular Material. These are simple to use and provide value in improving the user experience.
V. Keerti Kotaru
Chapter 12. Responsive Design Patterns
Abstract
In Angular Material, we have used multiple controls and elements that adapt Material Design principles and approaches. FAB is a popular component following Material Design principles. The speed dial among FAB controls is widely used in Material Design applications.
V. Keerti Kotaru
Backmatter
Metadata
Title
Material Design implementation with AngularJS
Author
V. Keerti Kotaru
Copyright Year
2016
Publisher
Apress
Electronic ISBN
978-1-4842-2190-7
Print ISBN
978-1-4842-2189-1
DOI
https://doi.org/10.1007/978-1-4842-2190-7

Premium Partner