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

  • Training JavaScript - 3. Angular for Frontend Development Angular (commonly referred to as 'Angular 2+' or 'Angular 2') is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations to address all of the parts of the developer's workflow while building complex web applications. Angular is a complete rewrite from the same team that built AngularJS.
  • OAuth2 with YaaS OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and YaaS. YaaS is a microservices ecosystem helping businesses to rapidly augment and build new, highly flexible solutions. In this article I will show you how to create OAuth2 client and how to use OAuth2 services in YaaS Platform
  • Angular.js 1.x Introduction AngularJS is a structural framework for dynamic web apps. It lets you extend HTML’s syntax to express your application’s components in a clear and concise manner. AngularJS is what HTML would have been, had it been designed for applications. It attempts to minimize the mismatch between document centric HTML and what an application needs by creating new HTML constructs.

Comments

comments powered by Disqus
Back to Top