angular-material Getting started with angular-material
Remarks
Angular Material is an UI component framework that allows you to produce single-page-application using a set of predefined components and directives.
Versions
| Version | Release Date |
|---|---|
| 1.1.4 | 2017-04-20 |
| 1.1.3 | 2017-01-31 |
| 1.1.2 | 2017-01-05 |
| 1.1.1 | 2016-09-01 |
| 1.1.0 | 2016-08-14 |
| 1.1.0-rc5 | 2016-06-03 |
| 1.1.0-rc4 | 2016-04-15 |
| 1.1.0-rc2 | 2016-03-30 |
| 1.1.0-rc1 | 2016-03-09 |
| 1.0.9 | 2016-05-19 |
| 1.0.8 | 2016-04-28 |
| 1.0.7 | 2016-04-01 |
| 1.0.6 | 2016-02-29 |
| 1.0.5 | 2016-02-04 |
| 1.0.4 | 2016-01-28 |
| 1.0.3 | 2016-01-21 |
| 1.0.2 | 2016-01-14 |
| 1.0.1 | 2015-12-17 |
| 1.0.0 | 2015-12-14 |
| 1.0.0-rc7 | 2015-12-08 |
| 1.0.0-rc6 | 2015-12-02 |
| 1.0.0-rc5 | 2015-11-25 |
| 1.0.0-rc4 | 2015-11-13 |
| 1.0.0-rc3 | 2015-11-06 |
| 1.0.0-rc2 | 2015-10-29 |
| 1.0.0-rc1 | 2015-10-21 |
| 0.11.4 | 2015-10-13 |
| 0.11.3 | 2015-10-12 |
| 0.11.2 | 2015-10-01 |
| 0.11.1 | 2015-09-25 |
| 0.11.0 | 2015-09-08 |
| 0.11.0-rc2 | 2015-09-03 |
| 0.11.0-rc1 | 2015-09-01 |
| 0.10.1 | 2015-08-11 |
| 0.10.0 | 2015-06-15 |
| 0.9.8 | 2015-06-08 |
| 0.9.8-rc1 | 2015-06-05 |
| 0.9.7 | 2015-06-01 |
| 0.9.5 | 2015-05-28 |
| 0.9.4 | 2015-05-15 |
| 0.9.3 | 2015-05-14 |
| 0.9.0 | 2015-05-04 |
| 0.9.0-rc3 | 2015-04-28 |
| 0.9.0-rc2 | 2015-04-20 |
| 0.9.0-rc1 | 2015-04-14 |
| 0.8.3 | 2015-03-03 |
| 0.8.2 | 2015-02-27 |
| 0.8.1 | 2015-02-24 |
| 0.8.0 | 2015-02-23 |
| 0.7.1 | 2015-01-30 |
| 0.7.0 | 2015-01-24 |
| 0.7.0-rc3 | 2015-01-14 |
| 0.7.0-rc2 | 2015-01-08 |
| 0.7.0-rc1 | 2014-12-19 |
| 0.6.1 | 2014-12-08 |
| 0.6.0-rc3 | 2014-11-26 |
| 0.6.0-rc2 | 2014-11-24 |
| 0.6.0-rc1 | 2014-11-18 |
| 0.5.1 | 2014-10-31 |
| 0.4.2 | 2014-10-16 |
| 0.4.1 | 2014-10-15 |
| 0.4.0 | 2014-10-06 |
| 0.0.3 | 2014-09-19 |
Installation or Setup
Installing Angular Material
npm
npm install angular-material --save
bower
bower install angular-material --save
jspm
jspm install angular-material
From Cloud
Getting Started (blank shell)
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.4%2Fangular-material.min.css%26quot%3B%26gt%3B%26lt%3B%2Fhead%26gt%3B%26lt%3Bbody%2520ng-app%3D%26quot%3BBlankApp%26quot%3B%2520ng-cloak%26gt%3B%2520%2520%26lt%3B!--%2520%2520%2520%2520Your%2520HTML%2520content%2520here%2520%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Angular%2520Material%2520requires%2520Angular.js%2520Libraries%2520--%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-animate.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-aria.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-messages.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B!--%2520Angular%2520Material%2520Library%2520--%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttp%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.4%2Fangular-material.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B!--%2520Your%2520application%2520bootstrap%2520%2520--%26gt%3B%2520%2520%26lt%3Bscript%2520type%3D%26quot%3Btext%2Fjavascript%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2F**%2520%2520%2520%2520%2520*%2520You%2520must%2520include%2520the%2520dependency%2520on"ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
Master (HEAD)
index.html :
<html ng-app="masterAngularMaterial">
<head>
<!-- This is important (meta) -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular and other dependencies -->
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-animate.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-aria.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.11%2Fangular-messages.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Angular%2520Material%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fcdn.rawgit.com%2Fangular%2Fbower-material%2Fmaster%2Fangular-material.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Blink%2520href%3D%26quot%3Bhttps%3A%2F%2Fcdn.rawgit.com%2Fangular%2Fbower-material%2Fmaster%2Fangular-material.min.css%26quot%3B%2520rel%3D%26quot%3Bstylesheet%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3B%2Fpath%2Fto%2Fapp.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%26lt%3Bbody%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-content%2520ng-controller%3D%26quot%3BSomeController%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%257B%257Bcontent%257D%257D%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B%2Fmd-content%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> app.js :
angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('SomeController', function($scope) {
$scope.content="Your content here.";
})
Note that importing from https://raw.githubusercontent.com will show this error:
Refused to execute script from 'https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
Setting up with the CDN
in the index.html, link the CSS from Google CDN
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.1%2Fangular-material.min.css%26quot%3B%26gt%3B%253C%2Fcode"> Required dependencies:
angularangular-ariaangular-animateangular-messages
<!-- Angular Material requires Angular.js Libraries -->
<script src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular-animate.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular-aria.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.5%2Fangular-messages.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%26lt%3B!--%2520Angular%2520Material%2520Library%2520--%26gt%3B%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.0%2Fangular-material.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%253C%2Fcode"> Link: https://material.angularjs.org/latest/getting-started
index.html
<!DOCTYPE html>
<html ng-app="angularMaterial">
<head>
<link rel="stylesheet"href="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.1%2Fangular-material.min.css%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Angular%2520Material%2520requires%2520Angular.js%2520Libraries%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular-animate.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular-aria.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular-messages.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3B!--%2520Angular%2520Material%2520Library%2520--%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bhttps%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangular_material%2F1.1.1%2Fangular-material.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bscript%2520src%3D%26quot%3Bapp.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Btitle%26gt%3BAngular%2520Material%26lt%3B%2Ftitle%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fhead%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3Bbody%2520ng-controller%3D%26quot%3BMainController%26quot%3B%26gt%3B%2520%2520%2520%2520%2520%2520%2520%2520%2520%26lt%3Bmd-content%26gt%3B%257B%257Bcontent%257D%257D%26lt%3B%2Fmd-content%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2Fbody%26gt%3B%2520%2520%2520%2520%26lt%3B%2Fhtml%26gt%3B%253C%2Fcode"> app.js
angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('MainController', function($scope) {
$scope.content = "Your content goes here.";
})
