angular-material Mise en place avec le CDN


Exemple

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