angular-material Zelfstudie
Aan de slag met hoekig materiaal

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


Opmerkingen

Angular Material is een UI-componentframework waarmee u toepassingen met één pagina kunt maken met behulp van een set vooraf gedefinieerde componenten en richtlijnen.

versies

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

Installatie of instellingen

Hoekig materiaal installeren

NPM 

npm install angular-material --save

prieel 

bower install angular-material --save

JSPM 

jspm install angular-material

Van Cloud

cdnjs | jsdelivr | googlecdn

Aan de slag (lege shell) 

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

Instellen met de CDN

koppel in de index.html de CSS van Google CDN 

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

Vereiste afhankelijkheden:

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

Houd er rekening mee dat bij het importeren van https://raw.githubusercontent.com deze fout wordt weergegeven:

Weigerde om script uit te voeren van ' https://raw.githubusercontent.com/angular/bower-material/master/angular-material.min.js ' omdat het MIME-type ('text / plain') niet uitvoerbaar is en strikte MIME typecontrole is ingeschakeld.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow