角度材料-環境設定

角度マテリアルの使用方法

角度材料を使用するには2つの方法があります-

ローカルインストール-ローカルマシンでnpm、jspm、bowerを使用してAngular Materialライブラリをダウンロードし、HTMLコードに含めることができます。
* CDNベースのバージョン*-angle-material.min.cssおよびangle-material jsファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

次のnpmコマンドを使用する前に、システムにNodeJSをインストールする必要があります。ノードJSに関する情報を取得するには、リンク：/nodejs/nodejs_environment_setup [こちら]をクリックして、NodeJSコマンドラインインターフェースを開きます。次のコマンドを使用して、Angular Materialライブラリをインストールします。

npm install angular-material

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

angular-animate@1.5.2 node_modules\angular-animate

angular-aria@1.5.2 node_modules\angular-aria

angular-messages@1.5.2 node_modules\angular-messages

angular@1.5.2 node_modules\angular

angular-material@1.0.6 node_modules\angular-material

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

例

これで、次のようにHTMLファイルに_css_および_js_ファイルを含めることができます-

<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は、最新バージョンのコンテンツを提供します。

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

例

ここで、Google CDNの angular-material.min.css および angular-material.min.js を使用して、上記の例を書き換えましょう。

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

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

Angular-material-environment

角度材料-環境設定

角度マテリアルの使用方法

ローカルインストール

例

CDNベースのバージョン

例

目次