Material design for Angular
JavaScript CSS HTML Other
Permalink
Failed to load latest commit information.
.github docs(contributing): fix invalid links and typo (#9329) Aug 23, 2016
config chore: rollback to firefox 49 sauce browser (#10236) Jan 8, 2017
docs fix(docs): fix broken links in theming docs Jan 4, 2017
gulp fix(build): prevent closure from stripping $inject annotations (#9765) Oct 27, 2016
scripts chore(test-versions): run tests against Angular v1.6 (#10235) Jan 8, 2017
src fix(tooltip): always resolve expressions against the correct scope (#… Jan 20, 2017
test fix(autocomplete): fix messages not appearing. (#9909) Nov 15, 2016
.clang-format chore(): add .clang-format file. Oct 1, 2015
.gitignore fix(bottomsheet): gridlist has spacing issue within a list item. Jul 10, 2016
.jshintrc chore(): fix more jshint warnings (#9387) Sep 8, 2016
.travis.yml chore(travis): run tests against angular snapshot (#10229) Jan 6, 2017
CHANGELOG.md Update CHANGELOG.md Sep 2, 2016
LICENSE Update license year Jan 8, 2016
README.md update(readme): add browser support illustration Sep 15, 2016
committers.json update(contributors): refresh dataset with contributors for 2016 Aug 18, 2016
gulpfile.js refactor(gulpfile): use forEach instead of filter Jul 1, 2015
package.json chore: add karma chrome launcher (#9778) Oct 9, 2016
release chore(release): adds a script to automate the release process May 13, 2015
release.js fix(release): version parser is fixed for `rc.#` syntax Jul 26, 2016
start-hook.sh fix(build): do not bower install in github hook script Apr 10, 2015
updateVersionPicker.js update(docs): updates the `updateVersionPicker` script to run `npm May 27, 2015
watch-hook.sh chore(scripts): add scripts Jul 1, 2014

README.md

Material Design for AngularJS Apps Build Status

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design specification for use in Angular single-page applications (SPAs).

venn diagram

For developers using AngularJS, Angular Material is the reference implementation of Google's Material Design Specification. This project implements version 1.x of Angular Material and includes a rich set of reusable, well-tested, and accessible UI components.

Quick Links:

Please note that using Angular Material requires the use of Angular 1.3.x or higher. Angular Material is targeted for all browsers with browser versions shown below with green boxes:

ngm1_browser_support

GitHub Universe

Based on the number of unique contributors and repository forks, GitHub Octoverse recently announced that Angular Material is one of the top 10 most-loved active projects on GitHub:

angularongithubuniverse

Online Documentation (and Demos)

Angular Material docs website
  • Visit Material.AngularJS.org online to review the API, see the components in action with live Demos, and study the Layout system.
  • Or you can build the documentation and demos locally; see Build Docs & Demos for details.

Our Release Processes

Angular Material has revised/improved its build processes. To preserve stability with applications currently using Angular Material, we will have three (3) types of releases:

  • major : this type of release will be the Angular 2.x efforts maintained in a separate repository called Material2. This type of release will not be used within Angular Material 1.x.
  • minor: aka master contains patch release changes AND breaking changes and new features
  • patch: non-breaking changes (no API, CSS, UX changes that will cause breaks in existing ngMaterial applications)
Patch Releases

The patch builds (1.0.4, 1.0.5, 1.0.6) are prepared based on commits in the patch branch; which contains only non-breaking changes (eg bug fix, some API additions, minimal non-breaking CSS changes ). We will be building patch releases every week.

Minor Releases

The minor build (1.1.0, 1.2.0, 1.3.0,...) are prepared based on commits in the master branch; which will remain the daily development branch AND will be the source for the minor releases.

Our formal release of minor builds is much less frequent; probably 1x / Quarter. Developers can easily obtain the latest, full change-set from bower or npm using references to @master.

Changelog

The Changelog may contain releases for patch or minor. If you do not see a fix listed in the Changelog but the issue has been resolved or the PR merged, then those changes will be master available in the next minor release.

for the purposes of Angular Material 1.x, you could think of the patch releases as being minor changes and the 'minor' releases as being major changes.

Contributing

Developers interested in contributing should read the following guidelines:

Please do not ask general questions in an issue. Issues are only to report bugs, request enhancements, or request new features. For general questions and discussions, use the Angular Material Forum.

It is important to note that for each release, the ChangeLog is a resource that will itemize all:

  • Bug Fixes
  • New Features
  • Breaking Changes

Building

Developers can easily build Angular Material using NPM and gulp.

First install or update your local project's npm tools:

# First install all the NPM tools:
npm install

# Or update
npm update

Then run the gulp tasks:

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

For more details on how the build process works and additional commands (available for testing and debugging) developers should read the Build Instructions.

Installing Build (Distribution Files)

Bower

For developers not interested in building the Angular Material library... use bower to install and use the Angular Material distribution files.

Change to your project's root directory.

# To get the latest stable version, use Bower from the command line.
bower install angular-material

# To get the most recent, latest committed-to-master version use:
bower install angular-material#master

Visit Bower-Material for more details on how to install and use the Angular Material distribution files within your own local project.

CDN

CDN versions of Angular Material are now available at Google Hosted Libraries.

With the Google CDN, you will not need to download local copies of the distribution files. Instead simply reference the CDN urls to easily use those remote library files. This is especially useful when using online tools such as CodePen, Plunkr, or JSFiddle.

  <head>

    <!-- Angular Material CSS now available via Google CDN; version 1.0.7 used here -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">

  </head>
  <body>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


    <!-- Angular Material Javascript now available via Google CDN; version 1.0.7 used here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
  </body>

Developers seeking the latest, most-current build versions can use GitCDN.link to pull directly from the distribution GitHub Bower-Material repository:

  <head>

    <!-- Angular Material CSS using GitCDN to load directly from `bower-material/master` -->
    <link rel="stylesheet" href="https://gitcdn.link/repo/angular/bower-material/master/angular-material.css">

  </head>
  <body>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>

    <!-- Angular Material Javascript using GitCDN to load directly from `bower-material/master` -->
    <script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>

  </body>

Once you have all the necessary assets installed, add ngMaterial as a dependency for your app:

angular.module('myApp', ['ngMaterial']);