You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

229 lines
7.0 KiB

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