angular-material Tutorial
Erste Schritte mit eckigem Material

Angular 2 AngularJS CSS HTML JavaScript jQuery Node.js SVG twitter-bootstrap TypeScript
Suche…


Bemerkungen

Angular Material ist ein UI-Komponenten-Framework, mit dem Sie aus einer Seite vordefinierte Komponenten und Anweisungen erstellen können.

Versionen

Ausführung Veröffentlichungsdatum
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 08.06.2015
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 oder Setup

Winkelmaterial installieren

npm 

npm install angular-material --save

Laube 

bower install angular-material --save

Jspm 

jspm install angular-material

Aus der Wolke

cdnjs | jsdelivr | googlecdn

Erste Schritte (leere Hülle) 

<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>

Einrichten mit dem CDN

Verknüpfen Sie in der index.html das CSS von Google CDN 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">

Erforderliche Abhängigkeiten:

  • 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.";
        })

Meister (KOPF)

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.";
    })

Beachten Sie, dass beim Importieren von https://raw.githubusercontent.com dieser Fehler angezeigt wird:

Das Skript aus ' https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js ' wurde nicht ausgeführt, da der MIME-Typ ('text / plain') nicht ausführbar ist und der strikte MIME-Code ist Die Typprüfung ist aktiviert.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow