Thursday, February 9, 2017

Angular Material - Quick Guide

What is Angular Material?

Angular Material is a UI component library for Angular JS developers. Angular Material's reusable UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Some of its salient features are as follows:
  • In-built responsive designing.
  • Standard CSS with minimal footprint.
  • Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
  • Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on.
  • Cross-browser, and can be used to create reusable web components.
  • Free to use

Responsive Design

  • Angular Material has in-built responsive designing so that the website created using Angular Material will redesign itself as per the device size.
  • Angular Material classes are created in such a way that the website can fit any screen size.
  • The websites created using Angular Material are fully compatible with PC, tablets, and mobile devices.

Extensible

  • Angular Material is by design very minimal and flat.
  • It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
  • It supports shadows and bold colors.
  • The colors and shades remain uniform across various platforms and devices.
And most important of all, it is absolutely free to use.

Angular Material - Environment Setup

How to Use Angular Material?

There are two ways to use Angular Material:
  • Local Installation - You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code.
  • CDN Based Version - You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN).

Local Installation

Use following npm commands to install Angular Material libraries
npm install angular-material
npm will download the files under node_modules > angular-material folder. Include the files as explained in the following example:

Example

Now you can include the css and js file in your HTML file as follows −
<html lang="en" >
   <head>
      <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
      <script src="/node_modules/angular-material/angular.js"></script>
      <script src="/node_modules/angular-material/angular-animate.js"></script>
      <script src="/node_modules/angular-material/angular-aria.js"></script>
      <script src="/node_modules/angular-material/angular-messages.js"></script>
      <script src="/node_modules/angular-material/angular-material.js"></script>
      <script type="text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
         <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>
It will produce the following result −

CDN Based Version

You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version.
We are using Google CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using angular-material.min.css and angular-material.min.js from Google CDN.
<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script type="text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
         <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>
It will produce the following result −
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)