Tiven Wang
chevron_rightMaterial Design chevron_rightAngular

Angular.js Adds 3rd Party Module - Angular Material

Wang Tiven November 28, 2016
425 favorite favorites
bookmark bookmark
share share

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>

References

Similar Posts

Comments

Back to Top