For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification. The Angular Material project provides a set of reusable, well-tested, and accessible UI components based on Material Design.
The project codes for this article can be downloaded from Github.
Installation
Install the angular-material module using
npm install angular-material --save
it dependents these two module:
npm install angular-aria@^1.5.0 --save
npm install angular-animate@^1.5.0 --save
Application Codes
The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.
A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector.
Import Module
Import and include angular-material module in your Angular module:
require('angular-material');
require('angular-material/angular-material.css');
angular
.module(app, [... , 'ngMaterial'])
Use Components
Use the components of angular-material like this
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#/implicit-grant" name="page-implicit-grant">Implicit Grant</md-nav-item>
<md-nav-item md-nav-href="#/client-credentials" name="page-client-credentials">Client Credentials</md-nav-item>
<md-nav-item md-nav-href="#/password-credentials" name="page-password-credentials">Password Credentials</md-nav-item>
</md-nav-bar>
Comments