Forum | tutorial pengembangan web terbaru
 

Angular Material Tutorial



Angular Material adalah komponen perpustakaan UI untuk Angular pengembang JS. Angular Material komponen membantu dalam membangun halaman web yang menarik, konsisten, dan fungsional dan aplikasi web saat mengikuti prinsip-prinsip desain web modern seperti portabilitas peramban, perangkat kemerdekaan, dan degradasi anggun. Ini membantu dalam menciptakan lebih cepat, indah, dan responsif website. Hal ini terinspirasi dari Desain Material Google.


Hadirin

Tutorial ini dimaksudkan untuk para profesional yang ingin mempelajari dasar-dasar Angular Material dan bagaimana menggunakannya untuk membuat lebih cepat, indah, dan situs web responsif. Tutorial ini menjelaskan semua konsep dasar Angular Material .


Prasyarat

Sebelum melanjutkan dengan tutorial ini, Anda harus memiliki pemahaman dasar tentang Angular JS, HTML, CSS, JavaScript, Document Object Model (DOM) , dan editor teks. Selain itu, akan membantu jika Anda tahu bagaimana aplikasi berbasis web bekerja.


Mengeksekusi Angular Material online

Untuk sebagian besar dari contoh yang diberikan dalam tutorial ini, Anda akan menemukan Try-it pilihan. Gunakan opsi ini untuk mengeksekusi Anda Angular Material program di tempat dan menikmati belajar Anda.

Cobalah contoh berikut menggunakan Try-it pilihan yang tersedia di pojok kanan atas kotak kode contoh berikut -

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