ecomp-portal-FE/client/bower_components/angular-material/README.md

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