No description, website, or topics provided.
JavaScript CSS
Switch branches/tags
v1.1.10 v1.1.10-master-f8f13a8 v1.1.10-master-eb10b56 v1.1.10-master-e56424e v1.1.10-master-e8f1113 v1.1.10-master-e3c1a5c v1.1.10-master-d48c5b8 v1.1.10-master-c34996d v1.1.10-master-b6b9a5c v1.1.10-master-afc2262 v1.1.10-master-a25a7df v1.1.10-master-a4b871a v1.1.10-master-6972119 v1.1.10-master-998199f v1.1.10-master-0721699 v1.1.10-master-140829b v1.1.10-master-97455f5 v1.1.10-master-33652b4 v1.1.10-master-3660a32 v1.1.10-master-2203eec v1.1.10-master-607dd02 v1.1.10-master-7fdf9da v1.1.10-master-4cecebb v1.1.10-master-4b1b729 v1.1.10-master-3ef9a02 v1.1.10-master-03e7c22 v1.1.10-master-2cc372d v1.1.10-master-1e0cefc v1.1.10-master-1d73d81 v1.1.10-master-0dd688c v1.1.10-master-0cb4af1 v1.1.9 v1.1.9-master-f6534d6 v1.1.9-master-ee7d3fa v1.1.9-master-e1b3407 v1.1.9-master-db1a85d v1.1.9-master-daf67a8 v1.1.9-master-d607e17 v1.1.9-master-ae17515 v1.1.9-master-a85f038 v1.1.9-master-a6bca73 v1.1.9-master-5284145 v1.1.9-master-0046467 v1.1.9-master-869bc21 v1.1.9-master-560adb8 v1.1.9-master-371bb5c v1.1.9-master-81eb46f v1.1.9-master-74d2445 v1.1.9-master-41c9d00 v1.1.9-master-9e6553d v1.1.9-master-9cc165f v1.1.9-master-6b3afbb v1.1.9-master-5e37b63 v1.1.8 v1.1.8-master-fae4042 v1.1.8-master-f926c96 v1.1.8-master-f6bdc05 v1.1.8-master-ef14194 v1.1.8-master-e87582a v1.1.8-master-e519c1b v1.1.8-master-e0078d7 v1.1.8-master-d412358 v1.1.8-master-d427bb9 v1.1.8-master-cf71d90 v1.1.8-master-c86767f v1.1.8-master-c62282f v1.1.8-master-bd3aa1d v1.1.8-master-bbfede8 v1.1.8-master-aba7b2b v1.1.8-master-aaf75cc v1.1.8-master-2360764 v1.1.8-master-640524a v1.1.8-master-011315f v1.1.8-master-9086b54 v1.1.8-master-5320d22 v1.1.8-master-5111f9d v1.1.8-master-02087cb v1.1.8-master-777a7e1 v1.1.8-master-0563f24 v1.1.8-master-546faac v1.1.8-master-65d78e0 v1.1.8-master-59a8d47 v1.1.8-master-55ad25c v1.1.8-master-50a1616 v1.1.8-master-40e1f2d v1.1.8-master-039d2fe v1.1.8-master-28c152f v1.1.8-master-27c0c81 v1.1.8-master-19da42d v1.1.8-master-8e5159e v1.1.8-master-1ef9ec3 v1.1.8-master-0fe831a v1.1.7 v1.1.7-master-e98ab3c v1.1.7-master-e3c55f9 v1.1.7-master-d3cb20d v1.1.7-master-cec409a v1.1.7-master-c638bd6 v1.1.7-master-c5ec316 v1.1.7-master-ba0e9fe
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

This repository is used for publishing the AngularJS Material v1.x library and localized installs using npm. The component source-code for this library is in the AngularJS Material repository.

Please file issues and pull requests against that angular/material repository only. Do not file issues here on the deployment repository.

Layouts and SCSS

Included in this repository are the:

  • SCSS files which are used to build the *.css files
  • Layout files which are used with the AngularJS Material (Flexbox) Layout API.

Note these are already included in the angular-material.css files. These copies are for direct developer access and contain IE flexbox fixes; as needed.

Installing AngularJS Material

You can install this package locally either with npm, jspm, or bower (deprecated).

Please note: AngularJS Material requires AngularJS 1.4.x to AngularJS 1.7.x.

Please note: AngularJS Material does not support AngularJS 1.7.1.

npm

# To install latest formal release 
npm install angular-material

# To install latest release and update package.json
npm install angular-material --save

# To install from HEAD of master
npm install http://github.com/angular/bower-material/tarball/master

# or use alternate syntax to install HEAD from master
npm install http://github.com/angular/bower-material#master --save
# note: ^^ creates the following package.json dependency
#      "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master"


# To install a v1.1.9 version 
npm install http://github.com/angular/bower-material/tarball/v1.1.9 --save

# To view all installed package 
npm list;

jspm

# To install latest formal release
jspm install angular-material

# To install from HEAD of master
jspm install angular-material=github:angular/bower-material@master

# To view all installed package versions
jspm inspect

Now you can use require('angular-material') when installing with npm or jspm, or when using Browserify or Webpack.

bower

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

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

# To save the bower settings for future use:
bower install angular-material --save

# Later, you can use easily update with:
bower update

Using the AngularJS Material Library

Now that you have installed the AngularJS libraries, simply include the scripts and stylesheet in your main HTML file, in the order shown in the example below. Note that NPM will install the files under /node_modules/angular-material/ and Bower will install them under /bower_components/angular-material/.

npm

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
</head>
  <body ng-app="YourApp">
  <div ng-controller="YourController">

  </div>

  <script src="/node_modules/angular/angular.js"></script>
  <script src="/node_modules/angular-aria/angular-aria.js"></script>
  <script src="/node_modules/angular-animate/angular-animate.js"></script>
  <script src="/node_modules/angular-messages/angular-messages.js"></script>
  <script src="/node_modules/angular-material/angular-material.js"></script>
  <script>
    // Include app dependency on ngMaterial
    angular.module('YourApp', ['ngMaterial', 'ngMessages'])
      .controller("YourController", YourController);
  </script>
</body>
</html>

bower

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
</head>
  <body ng-app="YourApp">
  <div ng-controller="YourController">

  </div>

  <script src="/bower_components/angular/angular.js"></script>
  <script src="/bower_components/angular-aria/angular-aria.js"></script>
  <script src="/bower_components/angular-animate/angular-animate.js"></script>
  <script src="/bower_components/angular-messages/angular-messages.js"></script>
  <script src="/bower_components/angular-material/angular-material.js"></script>
  <script>
    // Include app dependency on ngMaterial
    angular.module('YourApp', ['ngMaterial', 'ngMessages'])
      .controller("YourController", YourController);
  </script>
</body>
</html>

Using the CDN

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>
    <!-- Angular 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>

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

Note that the above sample references the 1.1.9 CDN release. Your version will change based on the latest stable release version.

Unit Testing with Angular Material


If you are using Angular Material and will be using Jasmine to test your own custom application code, you will need to also load two (2) Angular mock files:
  • Angular Mocks
    • angular-mocks.js from /node_modules/angular-mocks/angular-mocks.js
  • Angular Material Mocks
    • angular-material-mocks.js from /node_modules/angular-material/angular-material-mocks.js

Shown below is a karma-configuration file (karma.conf.js) sample that may be a useful template for your own testing purposes:

module.exports = function(config) {

  var SRC = [
    'src/myApp/**/*.js',
    'test/myApp/**/*.spec.js'
  ];

  var LIBS = [
    'node_modules/angular/angular.js',
    'node_modules/angular-animate/angular-animate.js',
    'node_modules/angular-aria/angular-aria.js',
    'node_modules/angular-messages/angular-messages.js',
    'node_modules/angular-material/angular-material.js',
    
    'node_modules/angular-mocks/angular-mocks.js',
    'node_modules/angular-material/angular-material-mocks.js'
  ];

  config.set({
    basePath: __dirname + '/..',
    frameworks: ['jasmine'],
    
    files: LIBS.concat(SRC),

    port: 9876,
    reporters: ['progress'],
    colors: true,

    autoWatch: false,
    singleRun: true,
    browsers: ['Chrome']
  });
};