angular-material Tutoriel
Se familiariser avec le matériau angulaire
Recherche…
Remarques
Le matériau angulaire est une structure de composant d'interface utilisateur qui vous permet de produire une application à une seule page en utilisant un ensemble de composants et de directives prédéfinis.
Versions
Version | Date de sortie |
---|---|
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 ou configuration
Installation de matériau angulaire
npm
npm install angular-material --save
tonnelle
bower install angular-material --save
jspm
jspm install angular-material
Du nuage
Mise en route (shell vide)
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="//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="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="//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>
Mise en place avec le CDN
dans le index.html, liez le CSS de Google CDN
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
Dépendances requises:
-
angular
-
angular-aria
-
angular-animate
-
angular-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>
Lien: 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.";
})
Maître (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.";
})
Notez que l'importation depuis https://raw.githubusercontent.com affichera cette erreur:
Refusé d'exécuter un script depuis ' https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js ' car son type MIME ('text / plain') n'est pas exécutable et strict MIME la vérification de type est activée.
Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow