Neueste Web-Entwicklung Tutorials
 

Angular Material Tutorial



Angular Material - Angular Angular Material ist eine UI - Komponenten - Bibliothek für Angular JS - Entwickler. Angular Material - Angular Material Komponenten helfen bei der Konstruktion attraktiv, konsistente und funktionale Web - Seiten und Web - Anwendungen , während den modernen Web - Design - Prinzipien wie Browser Portabilität, Geräteunabhängigkeit haftet, und Graceful Degradation. Es hilft bei der Schaffung schneller, schöner und reaktions Websites. Es wird von Google Material Design inspiriert.


Publikum

Dieses Tutorial ist für Profis gedacht , die die Grundlagen der lernen möchten , Angular Material und wie es zu benutzen , schneller zu schaffen, schön und ansprechender Websites. Dieses Tutorial erklärt alle grundlegenden Konzepte der Angular Material - Angular Material .


Voraussetzungen

Bevor Sie mit dieser Übung fortfahren, sollten Sie ein grundlegendes Verständnis von dem , Angular JS, HTML, CSS, JavaScript, Document Object Model (DOM) und einem beliebigen Texteditor. Darüber hinaus wird es helfen, wenn Sie wissen, wie Web-basierten Anwendungen arbeiten.


Führen Sie Angular Material - Angular Material Online

Für die meisten der Beispiele in diesem Tutorial gegeben, werden Sie einen finden Try-it - Option. Verwenden Sie diese Option , um auszuführen Angular Material Programme vor Ort und genießen Sie das Lernen.

Versuchen Sie das folgende Beispiel mit der Try-it - Option verfügbar in der oberen rechten Ecke des folgenden Beispielcode box -

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