AngularMaterial-環境設定

Angularマテリアルの使用方法は？

AngularMaterialを使用する方法は2つあります-

Local Installation −ローカルマシンでnpm、jspm、またはbowerを使用してAngular Materialライブラリをダウンロードし、HTMLコードに含めることができます。
CDN Based Version − Content Delivery Network（CDN）から直接、angular-material.min.cssファイルとangular-materialjsファイルをHTMLコードに含めることができます。

ローカルインストール

次のnpmコマンドを使用する前に、システムにNodeJSをインストールする必要があります。ノードJSについての情報を取得するには、クリックこことNodeJSコマンドラインインターフェースを開きます。次のコマンドを使用して、AngularMaterialライブラリをインストールします。

npm install angular-material

上記のコマンドは、次の出力を生成します-

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm 下のファイルをダウンロードします node_modules > angular-materialフォルダ。次の例で説明されているようにファイルを含めます-

例

これで、次のようにcssファイルとjsファイルをHTMLファイルに含めることができます。

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://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>

上記のプログラムは次の結果を生成します-

CDNベースのバージョン

含めることができます angular-material.css そして angular-material.jsコンテンツ配信ネットワーク（CDN）から直接HTMLコードにファイルを挿入します。Google CDNは、最新バージョンのコンテンツを提供します。

このチュートリアルでは、ライブラリのGoogleCDNバージョンを使用しています。

例

ここで、上記の例を使用して書き直してみましょう。 angular-material.min.css そして angular-material.min.js GoogleCDNから。

<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://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
         ypertext 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>

上記のプログラムは次の結果を生成します-