1This repository is used only for Angular Material v1.x library deployments and localized installs using `npm` and `bower`. The actual component source-code for this library is in the
  2[main Angular Material repository](https://github.com/angular/material).
  3
  4> Please file issues and pull requests against that `angular/material` repository only. Do not file issues here on the deployment repository.
  5
  6## Layouts and SCSS
  7
  8Included in this repository are the:
  9
 10* **[SCSS files](https://github.com/angular/bower-material/tree/master/modules/scss)** which are used to build the *.css files
 11* **[Layout files](https://github.com/angular/bower-material/tree/master/modules/layouts)** which are used with the Angular Material (Flexbox) Layout API. 
 12
 13> 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.
 14
 15## Installing Angular Material
 16
 17You can install this package locally either with `npm`, `jspm`, or `bower` (deprecated). 
 18
 19> Please note that Angular Material requires **Angular 1.3.x** or higher. 
 20
 21### npm
 22
 23```shell
 24# To install latest formal release 
 25npm install angular-material
 26
 27# To install latest release and update package.json
 28npm install angular-material --save
 29
 30# To install from HEAD of master
 31npm install http://github.com/angular/bower-material/tarball/master
 32
 33# or use alternate syntax to install HEAD from master
 34npm install http://github.com/angular/bower-material#master --save
 35# note: ^^ creates the following package.json dependency
 36#      "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master"
 37
 38
 39# To install a v1.1.0-rc2 version 
 40npm install http://github.com/angular/bower-material/tarball/v1.1.0-rc2 --save
 41
 42# To view all installed package 
 43npm list;
 44```
 45
 46### jspm
 47
 48```shell
 49# To install latest formal release
 50jspm install angular-material
 51
 52# To install from HEAD of master
 53jspm install angular-material=github:angular/bower-material@master
 54
 55# To view all installed package versions
 56jspm inspect
 57```
 58
 59Now you can use `require('angular-material')` when installing with **npm** or **jspm**, or when using Browserify or Webpack.
 60
 61### bower
 62
 63```shell
 64# To get the latest stable version, use bower from the command line.
 65bower install angular-material
 66
 67# To get the most recent, last committed-to-master version use:
 68bower install 'angular-material#master'
 69
 70# To save the bower settings for future use:
 71bower install angular-material --save
 72
 73# Later, you can use easily update with:
 74bower update
 75```
 76
 77## Using the Angular Material Library
 78
 79Now that you have installed the Angular libraries, simply include the scripts and 
 80stylesheet in your main HTML file, in the order shown in the example below. Note that npm 
 81will install the files under `/node_modules/angular-material/` and bower will install them 
 82under `/bower_components/angular-material/`.
 83
 84### npm
 85
 86```html
 87<!DOCTYPE html>
 88<html>
 89<head>
 90    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
 91    <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
 92</head>
 93	<body ng-app="YourApp">
 94
 95	<div ng-controller="YourController">
 96
 97	</div>
 98
 99	<script src="/node_modules/angular/angular.js"></script>
100	<script src="/node_modules/angular-aria/angular-aria.js"></script>
101	<script src="/node_modules/angular-animate/angular-animate.js"></script>
102	<script src="/node_modules/angular-material/angular-material.js"></script>
103	<script>
104
105		// Include app dependency on ngMaterial
106
107		angular.module( 'YourApp', [ 'ngMaterial' ] )
108			.controller("YourController", YourController );
109
110	</script>
111
112</body>
113</html>
114```
115
116### bower
117
118```html
119<!DOCTYPE html>
120<html>
121<head>
122    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
123    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
124</head>
125	<body ng-app="YourApp">
126
127	<div ng-controller="YourController">
128
129	</div>
130
131	<script src="/bower_components/angular/angular.js"></script>
132	<script src="/bower_components/angular-aria/angular-aria.js"></script>
133	<script src="/bower_components/angular-animate/angular-animate.js"></script>
134	<script src="/bower_components/angular-material/angular-material.js"></script>
135	<script>
136
137		// Include app dependency on ngMaterial
138
139		angular.module( 'YourApp', [ 'ngMaterial' ] )
140			.controller("YourController", YourController );
141
142	</script>
143
144</body>
145</html>
146```
147
148## Using the CDN
149
150CDN versions of Angular Material are now available at 
151[Google Hosted Libraries](https://developers.google.com/speed/libraries/devguide#angularmaterial). 
152
153With the Google CDN, you will not need to download local copies of the distribution files.
154Instead simply reference the CDN urls to easily use those remote library files. 
155This is especially useful when using online tools such as CodePen, Plunkr, or jsFiddle.
156
157```html
158  <head>
159
160    <!-- Angular Material CSS now available via Google CDN; version 0.9.4 used here -->
161    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
162
163  </head>
164  <body>
165  
166    <!-- Angular Material Dependencies -->
167    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
168    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
169    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
170    
171    <!-- Angular Material Javascript now available via Google CDN; version 0.9.4 used here -->
172    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
173    
174  </body>
175```
176
177> Note that the above sample references the 0.9.4 CDN release. Your version will change 
178based on the latest stable release version.
179
180## Unit Testing with Angular Material
181
182<br/>
183If 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:
184
185*  Angular Mocks - **angular-mocks.js** from `/node_modules/angular-mocks/angular-mocks.js`
186*  Angular Material Mocks - **angular-material-mocks.js** from `/node_modules/angular-material/angular-material-mocks.js`
187
188<br/>
189
190Shown below is a karma-configuration file (`karma.conf.js`) sample that may be a useful template for your own testing purposes:<br/><br/>
191
192```js
193module.exports = function(config) {
194
195  var SRC = [
196    'src/myApp/**/*.js',
197    'test/myApp/**/*.spec.js'
198  ];
199
200  var LIBS = [
201    'node_modules/angular/angular.js',
202    'node_modules/angular-animate/angular-animate.js',
203    'node_modules/angular-aria/angular-aria.js',
204    'node_modules/angular-material/angular-material.js',
205    
206    'node_modules/angular-mocks/angular-mocks.js',
207    'node_modules/angular-material/angular-material-mocks.js'
208  ];
209
210  config.set({
211
212    basePath: __dirname + '/..',
213    frameworks: ['jasmine'],
214    
215    files: LIBS.concat(SRC),
216
217    port: 9876,
218    reporters: ['progress'],
219    colors: true,
220
221    autoWatch: false,
222    singleRun: true,
223    browsers: ['PhantomJS,Chrome']
224
225  });
226
227};
228```
229