（10/6对于字体的补充说明在下面。）

---

我想创建一个AngularJS应用程序，但我也想使它的设计更加现代化，所以想采用Material Design。因此，考虑使用Angular Material。

以下是Angular Material的页面。

需要满足的条件是，已安装了node.js和git客户端。

安装bower。

bower是一款优秀的工具，它可以为前端开发安装必需的包。

关于Bower，这篇文章提供了详细的信息。

安装步骤如下。

npm install bower -g

如果有-g选项，则会进行全局安装；如果没有，则会安装在当前目录下。
如果进行全局安装，无论项目如何，都可以使用bower，所以我认为最好进行全局安装。

安装库。

我希望使用Angular Material这个库，因为它可以用于创建符合Material Design风格的Angular应用程序。

为了使用Angular Material，除了AngularJS本身之外，还需要安装额外的模块angular-animate和angular-aria。但是使用bower安装angular-material时，这些模块将一并安装，非常方便。

此外，bower.json可以包含包的信息。如果在bower环境中使用bower.json安装包，只要仓库中有bower.json，开发者就可以通过bower来配置各自的环境。这非常方便。

另外，当执行bower命令时，会在当前目录下创建一个名为bower_components的文件夹，并在其中安装各种库文件。由于我想要将库的安装位置和bower.json的位置分开，所以打算创建一个名为.bowerrc的文件，在其中进行安装目标的设置。

关于.bowerrc的详细信息，请参考以下文章：
http://qiita.com/sys1yagi/items/0a7b13395cf5c16ecd57

创建开发目录和创建.bowerrc文件。

首先创建一个开发目录，并将.bowerrc文件保存在其中。然后，在开发目录的直接下级创建一个名为”public”的目录。我认为.bowerrc文件的内容可以如下所示。

{
  "directory": "public/components",
  "json": "bower.json"
}

考虑到开发需要，将配置文件等放置在开发目录的下层，而实际发布的页面放置在public目录之下。然后，将所需的库文件放置在public/components目录之下，只需部署public目录，即可查看网站。这样设计了一个目录结构。

+ [開発用ディレクトリ]
    + .boewrrc
    + [public]

创建bower.json

打开命令提示符，将当前目录更改为开发目录。然后输入以下命令。

bower init

当问题出现时，可以默认回答所有问题。初次安装时，也不需要选择任何选项。如果回答”Looks good?”的问题（只需按下回车键即可），则会在执行bower init命令时，在当前目录下创建一个bower.json文件。

这样一来，开发目录的根目录下就创建了一个bower.json文件。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]

安装 Angular-Material。

bower install angular-material --save

如果有save选项，angular-material会被添加到bower.json的dependencies中。这意味着，只要在bower.json所在的位置运行bower install，angular-material也会被安装。这对于团队开发或者有多台开发机器的情况非常方便。

此外，即使突然安装angular-material，它也会自动下载所需的库，非常方便。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

我试试写一下

这段代码要复制来，但是需要做一些改动才行…。

创建hello.js

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };

}]);

把它保存为hello.js，在public文件夹下。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

你好.css的创建

一样地

.md-toolbar-tools h1 {
  font-size: inherit;
  font-weight: inherit;
  margin: inherit;
}

将它保存为hello.css，在public文件夹下。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

创作index.html

先把HTML源码全部复制，然后粘贴到index.html中保存在public文件夹下。

然后，在body元素中。

<link rel="stylesheet" href="./hello.css">

请在body闭合标签的上方立即添加

<script src="./hello.js"></script>

添加。

暂时只需一种选项。
现在将显示一个标题为“Hello World”的页面。

+ [開発用ディレクトリ]
    + .boewrrc
    + bower.json
    + [public]
        + hello.js
        + hello.css
        + index.html
        + [components]
            + [angular]
            + [angular-animate]
            + [angular-aria]
            + [angular-material]

修订 index.html

将从CDN获取的js文件和css文件路径修改为从./components/文件夹下获取。

请更改index.html文件。

既然这样，我想贴上一些更有活力的东西。我认为标签之类的东西很明显很好。

从标签直接删除到处，然后将以下源代码粘贴进去。

<div ng-cloak>
  <md-content class="md-padding">
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Hello</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Hello, hello.</p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>3 + 4 = {{3+4}}</p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

当点击选项卡时，将显示一个从点击位置开始扩散的动画，并且在Tab Three中放置了一个Angular表达式。如果AngularJS正常运行，将显示3 + 4 = 7。

总结

使用bower可以很方便地安装Angular Material。非常方便。

追加记录

由于https://material.angularjs.org/0.11.2/#/getting-started中的源代码是基于Angular Material 0.9.4编写的，因此源代码已经过时。具体来说，字体已经过时，需要进行修正。

将字体从RobotoDraft更改为Roboto。

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

另外，通过调整浏览器宽度，可以实现侧边导航的显示开关。我没注意到改变浏览器宽度会有变化…