2016/03/31

Angular Material 実践 vol.1

最近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のボタンができたかなと思います。 ↑こんな感じの。 一旦、導入までまとめました。