Skip to main content
main-content

Über dieses Buch

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

Inhaltsverzeichnis

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

Weitere Informationen

Premium Partner

    Bildnachweise