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 --savebower
bower install angular-material --savejspm
jspm install angular-materialFrom Cloud
cdnjs | jsdelivr | googlecdn
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="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>Setting up with the CDN
in the index.html, link the CSS from Google CDN
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">Required dependencies:
angularangular-ariaangular-animateangular-messages
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>Link: https://material.angularjs.org/latest/getting-started
index.html
<!DOCTYPE html>
<html ng-app="angularMaterial">
<head>
<link rel="stylesheet"href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="app.js"></script>
<title>Angular Material</title>
</head>
<body ng-controller="MainController">
<md-content>{{content}}</md-content>
</body>
</html>app.js
angular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('MainController', function($scope) {
$scope.content = "Your content goes here.";
})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="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<!-- Angular Material -->
<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<link href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.min.css" rel="stylesheet">
<script src="/path/to/app.js"></script>
</head>
<body>
<md-content ng-controller="SomeController">
{{content}}
</md-content>
</body>
</html>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.