Foro | Los últimos tutoriales de desarrollo web
 

Angular Material Tutorial



Angular Material es una biblioteca de componentes de interfaz de usuario para Angular desarrolladores JS. Angular Material componentes ayuda en la construcción de atractivos, coherentes y funcionales páginas web y aplicaciones web, mientras que se adhieren a los principios modernos de diseño web como la portabilidad del navegador, la independencia de dispositivo, y una degradación elegante. Esto ayuda en la creación de sitios web más rápido, bellos y sensibles. Se inspira de Google Diseño de materiales.


Audiencia

Este tutorial está dirigido a profesionales que quieran aprender los fundamentos de Angular Material y la forma de utilizarlo para crear más rápido, bello y sitios web sensibles. Este tutorial explica todos los conceptos fundamentales del Angular Material .


Requisitos previos

Antes de continuar con este tutorial, usted debe tener una comprensión básica de Angular JS, HTML, CSS, JavaScript, Document Object Model (DOM) , y cualquier editor de texto. Además, le ayudará si usted sabe cómo funcionan las aplicaciones basadas en web.


Ejecutar Angular Material en línea

Para la mayoría de los ejemplos dados en este tutorial, se encuentra un Try-it opción. Utilice esta opción para ejecutar sus Angular Material programas en el lugar y disfrutar de su aprendizaje.

El siguiente ejemplo muestra el uso de la Try-it opción disponible en la esquina superior derecha de la siguiente ventana de código de ejemplo -

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