フォーラム | 最新のWeb開発のチュートリアル
 

Angular Material Tutorial



Angular MaterialのためのUIコンポーネントライブラリであるAngular JSの開発者。 Angular Material部品は、魅力的な一貫性、および機能的なWebページやWebアプリケーションブラウザの移植、デバイスの独立性、そして優雅な劣化などの近代的なウェブデザインの原則を守りながらの構築に役立ちます。 それはより速く、美しく、かつ応答性のウェブサイトを作成するのに役立ちます。 これは、Googleのマテリアルデザインからインスピレーションを得ています。


聴衆

このチュートリアルは、の基礎を学びたい専門家のために意味されるAngular Materialとどのように速く、美しく作成するためにそれを使用する方法、および応答性のウェブサイトを。 このチュートリアルでは、すべての基本的な概念について説明しAngular Material


前提条件

このチュートリアルを進める前に、あなたはの基本的な理解が必要ですAngular JS、HTML、CSS、JavaScriptの、ドキュメントオブジェクトモデル(DOM)および任意のテキストエディタを。 あなたはWebベースのアプリケーションがどのように機能するかを知っていればまた、それが役立ちます。


実行Angular Materialをオンラインで

このチュートリアルで示す例のほとんどは、あなたは見つけるでしょうTry-itオプションを選択します。 あなたの実行には、このオプションを使用Angular Material場でプログラムをし、あなたの学習をお楽しみください。

使用して、次の例を試してTry-it次のサンプルコードボックスの右上に利用できるオプションを-

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