AngularJS と UI Bootstrapを使ってみた

最初は日付選択のカレンダーがほしいなと探していて、
辿りついたのがAngularJS と UI Bootstrapになりました！
公式が英語なのと、サンプルがいろいろ混ざってたので
今回はポップアップ時のみ、ぬきだしでサンプルメモを残していきます。

導入方法

AngularJS

npm install angular@1.4.8-rc.2
npm install angular-animate@1.4.8-rc.2

UI Bootstrap

npm install angular-ui-bootstrap

Bootstrap

npm install bootstrap

使用方法

今回はラベルに表示しています。
html側の表記は以下のとおり、jade使ってます。

jade

doctype html
html(ng-app='angluer.bootstrap')
 head
   title= title
   link(rel='stylesheet', href='/javascripts/lib/bootstrap/dist/css/bootstrap.min.css')
   script(src='/javascripts/lib/angular/angular.min.js')
   script(src='/javascripts/lib/angular-animate/angular-animate.min.js')
   script(src='/javascripts/lib/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js')
   script(src='/javascripts/script.js')
 body
  div.form-group(ng-controller='Datepicker as dt')
    h3.control-label 誕生日検索：{{dt.date | date : 'yyyy/MM/dd'}}
     i.glyphicon.glyphicon-calendar(uib-datepicker-popup ng-model="dt.date" is-open="dt.popup.opened" min-date="dt.minDate" max-date="dt.maxDate" datepicker-options="dt.dateOptions" ng-required="true" close-text="Close" ng-click="dt.open()")
  hr

コントローラは以下のとおりです。

script.js

var angboot = angular.module('angluer.bootstrap', ['ngAnimate', 'ui.bootstrap']);

angboot.controller('Datepicker', function () {
        this.date = new Date(); //デフォルト日付
        this.maxDate = new Date(2100,12, 31); //最大日付
        this.minDate = new Date(1900,1,1); //最小日付
        this.format = 'yyyy/MM/dd' //日付フォーマット

        this.popup = {
            opened: false
        };

        this.dateOptions = {
            formatYear: 'yyyy', //カレンダーの年の表示フォーマット
            startingDay: 1 //カレンダー初期日付
        };

        this.open = function() {
            this.popup.opened = true;
        };

});

ハマったのはvar angboot = angular.module('angluer.bootstrap', ['ngAnimate', 'ui.bootstrap']);のポイントで
取り込みモジュール名'ui.bootstrap'とスクリプト内での名称を一致させると、
動作しないというところでした。

失敗例：

var angboot = angular.module('ui.bootstrap', ['ngAnimate', 'ui.bootstrap']);


とりあえず、最新のangular.jsでも上記のコードは動作することまでは確認できました。