【FE】Angular Material 実践 vol.1

最近１からAngularを実装する機会があったのですが、デザインをおこすのが億劫だと思い、AngualrMaterialならばPSDを作らずともいい感じのデザインになるのではないかと思い、手を出してみました。

その時はまったことなどを紹介します。

Angular Materialとは

googleが提供している、AngularJS用のUIコンポーネントです。

導入

bower install angular --save
bower install angular-material --save

必要なJSを読み込み

jquery.min.js
angular.min.js
angular-material.min.js
angular-aria.min.js
angular-animate.min.js
angular-ui-router.min.js
angular-material.min.css

Angular Material Design Table

Angular Materialに良い感じのテーブルがなかったので、MaterialDesiginTableを採用してみました。

導入

bower install angular-material-data-table --save

読み込み

md-data-table.min.js
md-data-table.min.css

ControllerにDIする

angular
  .module('app', ['ngMaterial'])
  .controller('DemoCtrl', DemoCtrl);

function DemoCtrl() {

}

html

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
      <md-button class="md-raised">Button</md-button>
    </section>
  </md-content>
</div>

これでいい感じのMaterial Deginのボタンができたかなと思います。

↑こんな感じの。

一旦、導入までまとめました。 cssを定義しなくても良い感じにmaterial desiginを適用してくれるので、非常に便利かと思います。

簡単にmaterial desiginを適用したくなったら是非。

HIKI Tech Blog

yhikishimaのブログ。ゆるくUE4やUnity、web開発の記事を書いてます。