材料

AngularJS アプリのマテリアル デザイン

マテリアル デザインは、さまざまなデバイスに適応するビジュアル、モーション、インタラクション デザインの統一システムの仕様です。私たちの目標は、AngularJS シングルページ アプリケーション (SPA) で使用するためのマテリアル デザイン仕様を実装する、無駄のない軽量な AngularJS ネイティブ UI 要素のセットを提供することです。

AngularJS マテリアルは、 AngularJS (v1.x) 開発者向けの Google のマテリアル デザイン仕様 (2014-2017) の実装です。

マテリアル デザイン仕様 (2018 以降) の実装については、Angular (v2 以降) 開発者向けに構築された Angular マテリアル プロジェクトを参照してください。

生産終了

AngularJS マテリアルのサポートは、2022 年 1 月をもって正式に終了しました。サポート終了の意味を確認し、サポート終了のお知らせをお読みください。アクティブにサポートされている Angular マテリアルについては、material.angular.io にアクセスしてください。

セキュリティ問題の報告の詳細については、こちらをご覧ください。

AngularJS マテリアルには、再利用可能で、十分にテストされ、アクセス可能な UI コンポーネントの豊富なセットが含まれています。

クイックリンク:

• APIとデモ
• 建物
• インストール中

最新バージョンの AngularJS マテリアルを使用するには、 AngularJS 1.7.2以降を使用する必要があることに注意してください。

AngularJS マテリアルは、package.json のbrowserslistフィールドで定義されたブラウザーのバージョンをサポートします。詳細については、ドキュメント サイトをご覧ください。

AngularJS マテリアルは、ここにリストされているスクリーン リーダーのバージョンをサポートしています。

オンラインのドキュメントとデモ

• オンラインでmaterial.angularjs.orgにアクセスしてAPIを確認し、ライブデモでコンポーネントの動作を確認し、レイアウトシステム、テーマシステム、タイポグラフィなどを含む詳細なガイドを読んでください。
• または、ドキュメントとデモをローカルで構築することもできます。詳細については、「ビルドに関するドキュメントとデモ」を参照してください。

建物

開発者は、NPM と gulp を使用して AngularJS マテリアルを構築できます。

まず、ローカル プロジェクトのnpm依存関係をインストールまたは更新します。

npm install

Gulp v3 をグローバルにインストールします。

npm install -g gulp@3

次に、 gulpタスクを実行します。

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

開発の場合は、 docs:watch NPMスクリプトを使用して開発モードで実行します。

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

ビルド プロセスの仕組みと追加コマンド (テストとデバッグに利用可能) の詳細については、開発者はビルド ガイドを読む必要があります。

ビルドのインストール (配布ファイル)

故宮

AngularJS マテリアル ライブラリの構築に興味がない開発者は、 NPM を使用して AngularJS マテリアル配布ファイルをインストールして使用します。

プロジェクトのルート ディレクトリに変更します。

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

その他の依存関係マネージャー

ローカル プロジェクト内で AngularJS マテリアル配布ファイルをインストールして使用する方法の詳細については、配布リポジトリにアクセスしてください。

CDN

AngularJS マテリアルの CDN バージョンが利用可能です。

Google CDN を使用すると、配布ファイルのローカル コピーをダウンロードする必要がなくなります。代わりに、CDN URL を参照するだけで、これらのリモート ライブラリ ファイルを簡単に使用できます。これは、CodePen や Plunker などのオンライン ツールを使用する場合に特に便利です。

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

最新のビルド バージョンを求める開発者は、GitCDN.xyz を使用して配布リポジトリから直接プルできます。

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

必要なアセットをすべてインストールしたら、アプリの依存関係としてngMaterialとngMessagesを追加します。

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;