angular-material Samouczek
Rozpoczęcie pracy z materiałem kątowym
Szukaj…
Uwagi
Angular Material to struktura komponentów interfejsu użytkownika, która umożliwia tworzenie aplikacji jednostronicowych przy użyciu zestawu predefiniowanych komponentów i dyrektyw.
Wersje
| Wersja | Data wydania |
|---|---|
| 1.1.4 | 2017-04-20 |
| 1.1.3 | 31.01.2017 |
| 1.1.2 | 2017-01-05 |
| 1.1.1 | 01.09.2016 |
| 1.1.0 | 14.08.2016 |
| 1.1.0-rc5 | 2016-06-03 |
| 1.1.0-rc4 | 15.04.2016 |
| 1.1.0-rc2 | 30.03.2016 |
| 1.1.0-rc1 | 2016-03-09 |
| 1.0.9 | 2016-05-19 |
| 1.0.8 | 28.04.2016 |
| 1.0.7 | 01.04.2016 |
| 1.0.6 | 29.02.2016 |
| 1.0.5 | 2016-02-04 |
| 1.0.4 | 28.01.2016 |
| 1.0.3 | 21.01.2016 |
| 1.0.2 | 14.01.2016 |
| 1.0.1 | 17.12.2015 |
| 1.0.0 | 14.12.2015 |
| 1.0.0-rc7 | 08.12.2015 |
| 1.0.0-rc6 | 02.12.2015 |
| 1.0.0-rc5 | 2015-11-25 |
| 1.0.0-rc4 | 13.11.2015 |
| 1.0.0-rc3 | 2015-11-06 |
| 1.0.0-rc2 | 2015-10-29 |
| 1.0.0-rc1 | 21.10.2015 |
| 0.11.4 | 2015-10-13 |
| 0.11.3 | 2015-10-12 |
| 0.11.2 | 01.10.2015 |
| 0.11.1 | 2015-09-25 |
| 0.11.0 | 08.09.2015 |
| 0.11.0-rc2 | 2015-09-03 |
| 0.11.0-rc1 | 01.09.2015 |
| 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 | 01.06.2015 |
| 0,9,5 | 28.05.2015 |
| 0.9.4 | 2015-05-15 |
| 0.9.3 | 2015-05-14 |
| 0.9.0 | 2015-05-04 |
| 0,9-rc3 | 28.04.2015 |
| 0,9-rc2 | 2015-04-20 |
| 0,9-rc1 | 14.04.2015 |
| 0.8.3 | 2015-03-03 |
| 0.8.2 | 27.02.2015 |
| 0.8.1 | 24.02.2015 |
| 0.8.0 | 23.02.2015 |
| 0.7.1 | 30.01.2015 |
| 0.7.0 | 24.01.2015 |
| 0,7-rc3 | 14.01.2015 |
| 0,7-rc2 | 08.01.2015 |
| 0,7-rc1 | 2014-12-19 |
| 0.6.1 | 08.12.2014 |
| 0.6.0-rc3 | 26.11.2014 |
| 0,6-rc2 | 24.11.2014 |
| 0.6.0-rc1 | 18.11.2014 |
| 0,5.1 | 2014-10-31 |
| 0.4.2 | 16.10.2014 |
| 0.4.1 | 15.10.2014 |
| 0.4.0 | 06.10.2014 |
| 0.0.3 | 2014-09-19 |
Instalacja lub konfiguracja
Instalowanie materiału kątowego
npm
npm install angular-material --save
altana
bower install angular-material --save
jspm
jspm install angular-material
Z chmury
Pierwsze kroki (pusta powłoka)
<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>
Konfiguracja z CDN
w index.html połącz CSS z Google CDN
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
Wymagane zależności:
-
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>
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.";
})
Pamiętaj, że importowanie z https://raw.githubusercontent.com spowoduje wyświetlenie tego błędu:
Odmowa wykonania skryptu z „ https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js ”, ponieważ jego typ MIME („tekst / zwykły”) nie jest wykonywalny i ściśle MIME sprawdzanie typu jest włączone.
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow