Skip to content
Material design for AngularJS
Branch: master
Clone or download
marosoft and jelbourn fix(rtl): support applying dir="rtl" on DOM elements other than the b…
…ody (#11579)

Create a single function to check text direction based on dir attribute on DOM element or document.

Fixes #11016 Fixes #9754
Latest commit bc7833b Jul 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore(ci): only unset the CircleCI SSH override once (#11624) Jan 30, 2019
.github docs(contributing): add more links to ToC and link to GitHub Terms (#… May 20, 2019
config docs: switch from cdn.gitcdn.link to gitcdn.xyz. update dependencies (#… Apr 1, 2019
docs docs: update for new angular/components repo name (#11723) May 14, 2019
gulp build: make the build output deterministic and reproducible (#11570) Mar 13, 2019
scripts docs: switch from cdn.gitcdn.link to gitcdn.xyz. update dependencies (#… Apr 1, 2019
src fix(rtl): support applying dir="rtl" on DOM elements other than the b… Jul 11, 2019
test chore(tests):remove unused phantomJS workaround (#11659) Apr 24, 2019
.clang-format chore(): add .clang-format file. Oct 1, 2015
.eslintignore build: configure ESLint coverage for gulp, scripts, docs, config (#11064 Jan 18, 2018
.eslintrc.json style(eslint): enable keyword-spacing rule (#11586) Jan 11, 2019
.gitignore build: configure ESLint coverage for gulp, scripts, docs, config (#11064 Jan 18, 2018
.jshintrc Fix jshint warnings (#11109) Mar 15, 2018
.mailmap chore(git): update .mailmap file (#11595) Jan 11, 2019
CHANGELOG.md update version number in package.json to 1.1.19 May 31, 2019
LICENSE docs: change to LLC instead of Inc. in Copyright and licenses (#11368) Jul 12, 2018
README.md docs: update for new angular/components repo name (#11723) May 14, 2019
gulpfile.js style(eslint): enable spaced-comment rule (#11585) Jan 11, 2019
package-lock.json build: update dependencies (#11735) May 30, 2019
package.json build: set engines to disable NodeJS 12 due to Gulp 3 (#11754) Jun 28, 2019
release chore(release): adds a script to automate the release process May 13, 2015
release.js build(release): detect that gulp is not installed globally (#11737) Jun 13, 2019
start-hook.sh fix(build): do not bower install in github hook script Apr 10, 2015
updateVersionPicker.js style(eslint): enable spaced-comment rule (#11585) Jan 11, 2019
watch-hook.sh chore(scripts): add scripts Jul 1, 2014

README.md

Material Design for AngularJS Apps

npm version Build Status Gitter

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 AngularJS single-page applications (SPAs).

AngularJS Material is an implementation of Google's Material Design Specification (2014-2017) for AngularJS developers.

For an implementation of the Material Design Specification (2018+), please see the Angular Material project which is built for Angular developers.

venn diagram

AngularJS Material includes a rich set of reusable, well-tested, and accessible UI components.

Quick Links:

Please note that using AngularJS Material requires the use of AngularJS 1.4.x or higher.

AngularJS Material is targeted for the browser versions defined in the browserslist field of our package.json. Below is a screenshot from browserl.ist that provides a visual representation of this configuration:

AngularJS Material Browser Support

Online Documentation and Demos

AngularJS Material docs website

  • Visit material.angularjs.org online to review the API, see the components in action via live demos, and to read our detailed guides which include the layout system, theming system, typography, and more.
  • Or you can build the documentation and demos locally; see Build Docs & Demos for details.

Our Release Processes

To preserve stability with applications currently using AngularJS Material, we do not follow semver. We have three types of releases:

  • major : major releases will be done in the separate Angular Material repo. This type of release will not be used within AngularJS Material.
  • minor: contain breaking changes in addition to patch release changes.
  • patch: non-breaking changes (no API, CSS, UX changes that will cause breaks in existing AngularJS Material applications).
Patch Releases

The patch builds (1.1.8, 1.1.9, 1.1.10, etc.) are prepared based on commits in the master branch; which contains only non-breaking changes (I.e. bug fixes, new features, API additions, and minimal non-breaking CSS changes). We are targeting patch releases every 2 weeks.

Minor Releases

The minor builds (1.1.0, 1.2.0, 1.3.0) can contain breaking changes to CSS, APIs, and UX. Our formal release of minor builds is much less frequent. The release process for minor builds is currently being re-evaluated.

For the purposes of AngularJS Material, you could think of the patch releases as being minor changes and the 'minor' releases as being major changes according to semver.

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 AngularJS 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 build AngularJS Material using NPM and gulp.

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

npm install

Then run the gulp tasks:

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

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

For development, use the docs:watch NPM script to run in dev mode:

# To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

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

Installing Build (Distribution Files)

NPM

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

Change to your project's root directory.

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

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

Other Dependency Managers

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

This includes instructions for Bower and JSPM.

CDN

CDN versions of AngularJS Material are now available.

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, Plunker, or JSFiddle.

  <head>

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

  </head>
  <body>

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

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

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

  <head>

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

  </head>
  <body>

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

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

  </body>

Once you have all the necessary assets installed, add ngMaterial and ngMessages as dependencies for your app:

angular.module('myApp', ['ngMaterial', 'ngMessages']);
You can’t perform that action at this time.