尝试使用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
引导启动
npm install bootstrap
使用方式
这次我们在标签上显示了。
HTML的表现方式如下,我使用了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
控制器的内容如下所示。
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’与脚本内部的名称匹配,如果不匹配,就会导致脚本无法正常运行。
失敗例:
變數angboot = angular.module(‘ui.bootstrap’, [‘ngAnimate’, ‘ui.bootstrap’]);
暂时而言,我已经确认上述代码在最新的angular.js中可以运行。