読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #番外編【UI Bootstrapの導入】

AngularJS Bootstrap

AngularJSを導入した環境(AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】 - Web Design Note)の下で、Bootstrapを使える状態にします。

UI Bootstrap(JS)の導入

公式サイトで配布されているBootsrapをそのまま使うと不具合が起きるので、AngularJSの拡張モジュールである「UI Bootstrap」を以下手順で導入します。

  1. UI Bootstrapの公式サイトから「ui-bootstrap-tpls-0.12.0.min.js」をダウンロードします。
  2. scriptタグで「ui-bootstrap-tpls-0.12.0.min.js」を読み込みます
  3. コントローラー用JSで、angular.module()メソッドの第2引数に「ui.bootstrap」を指定します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <script src="js_angular/angular-1.3.0.min.js"></script>
  <script src="js_angular/ui-bootstrap-tpls-0.12.0.min.js">
  <script src="js/script.js"></script>
</head>
<body>
  <div  ng-app>
    Hallo,World.
  </div>
</body>
</html>

js/script.js

angular.module("timekeeper", ["ui.bootstrap"]);

※この状態ではまだBootstrapは使えません。

Bootstrap(CSS)の導入

次に、BootstrapのCSSファイルを導入します。LessやSassの環境も構築可能ですが、これは後ほど対応するとして、今回は、通常のCSSを使えるようにします。

  1. まず、公式サイトの「Download Bootstrap」からzipファイルをダウンロードして、解凍します。
  2. 解凍された「dist」フォルダの中にある「css」「fonts」「js」フォルダのうち、「css」「fonts」をindex.htmlがあるフォルダに移動させます(「UI Bootstrap」があれば「js」フォルダは不要)。
  3. htmlからは、link要素で「css/bootsrap.css」を読み込みます。

これで、AngularJSとBootstrapが使える環境が整いました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <link rel="stylesheet" href="css_bootstrap/bootstrap.css">
  <script src="js_angular/angular-1.3.0.min.js"></script>
  <script src="js_angular/ui-bootstrap-tpls-0.12.0.min.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div ng-app>
    Hallo,World.
  </div>
</body>
</html>

ディレクトリ構成

index.html
css_boostrap/
  boostrap.css
fonts/
angularjs/
  angular-1.3.0.min.js
  angular.min.js.map
  ui-bootstrap-tpls-0.12.0.min.js
js/
  script.js