Forum | Derniers tutoriels de développement web
 

Angular Material Tutorial



Angular Material est une bibliothèque de composants d'interface utilisateur pour Angular développeurs JS. Angular Material composants aide à la construction de pages Web attrayantes, cohérentes et fonctionnelles et des applications web tout en respectant les principes de conception web moderne comme la portabilité du navigateur, l' indépendance de l' appareil et la dégradation gracieuse. Il aide à créer des sites Web plus rapide, belle et sensible. Il est inspiré de Google Matériel de conception.


Public

Ce tutoriel est destiné aux professionnels qui souhaitent apprendre les rudiments de Angular Material et comment l' utiliser pour créer plus rapidement, belle et sites sensibles. Ce tutoriel explique tous les concepts fondamentaux de la Angular Material .


Conditions préalables

Avant de procéder à ce tutoriel, vous devriez avoir une compréhension de base Angular JS, HTML, CSS, JavaScript, modèle objet de document (DOM) , et un éditeur de texte. De plus, il vous aidera si vous savez comment fonctionnent les applications basées sur le Web.


Exécuter Angular Material en ligne

Pour la plupart des exemples donnés dans ce tutoriel, vous trouverez un Try-it option. Utilisez cette option pour exécuter vos Angular Material des programmes sur place et profiter de votre apprentissage.

Essayez l'exemple suivant à l' aide du Try-it l' option disponible dans le coin supérieur droit de la boîte de code exemple suivant -

<html lang="en" >
   <head>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/ angular -material.min.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ angular .min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ angular -animate.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ angular -aria.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ angular -messages.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/ angular -material.min.js"></script>
      <script type="text/javascript">    
         angular.module('firstApplication', ['ngMaterial']) ;
      </script>
   </head>
   <body ng-app="firstApplication" ng-cloak>
      <md-toolbar class="md-warn">
         <div class="md-toolbar-tools">
            <h2 class="md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) .</p>
         <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>