無限大な夢のあと

テニスとアニメが大好きな厨二病SEのブログ

Angular2+ng2-bootstrapを使用し、カレンダーUIのサンプルを動かしてみる

Webサービス開発に向けて、まずは使用するライブラリのサンプルを動かしたりするところから始めています。

Bootstrapを使いたかったので、Angular2でうまく使えるものがないか探した結果、以下のng2-bootstrapが見つかりました。
github.com

早速上記を適用してみようということで、前回の記事のハンズオンで作成したところに、機能追加してみようと思います。
dke-msy-node.hatenablog.com

具体的には、ng2-bootstrapのカレンダーUI(DatepickerのExample)を機能追加して動かすまでの備忘録として、本記事を書きます。

ここから修正内容の本題です。
(1)以下のチュートリアルに従い、npmからng2-bootstrapをインストールします。
Angular2 Bootstrap

npm install --save ng2-bootstrap


(2)componentsフォルダに、calendarフォルダを作成します。

(3)calendarフォルダ配下にcalendar.htmlを作成します。
こちらは、DatepickerのExapmleそのままなので、特に注意点はなしです。

gist85ca66808fc57e21e5470f468dd7a8d6

(4)calendarフォルダ配下にcalendar.tsを作成します。
こちらは、サンプルをそのまま使用するだけだと動かないので、注意ポイントがいくつかあります。
先に完成形のコードを載せます。

gist501d330392c7cc90de94d168744efc71

(4-1) DATEPICKER_DIRECTIVESの読み込みパスを変更。
サンプルの構造と違うので、以下のように変更する必要があります。

(変更前)

import {DATEPICKER_DIRECTIVES} from '../../../ng2-bootstrap';

(変更後)

import {DATEPICKER_DIRECTIVES} from 'ng2-bootstrap';

(4-2)外部htmlの指定方法を変更。

WebPackを使用していない場合は、外部HTMLの読み込みはrequireを使用するとエラーが発生するので、読み込み方法を変更。
Template→TemplateUrlとし、直接指定とします。
また、指定するHTMLは先ほど作成したcalendar.htmlとします。

(変更前)

// webpack html imports
let template = require('./datepicker-demo.html');

@Component({
  selector: 'datepicker-demo',
  template: template,

(変更後)

@Component({
    selector: 'calendar-demo',
    templateUrl: 'components/calendar/calendar.html',

(4-3)selectorの名前を変更
(変更前)

@Component({
  selector: 'datepicker-demo',

(変更後)

@Component({
    selector: 'calendar-demo',

(4-4)Componentの名前を変更
(変更前)

export class DatepickerDemoComponent {

(変更後)

export class CalendarComponent {


(5)main.tsで、CalendarComponentを読み込む。

gistd7521928e685b81e2014cbf0ef456ccc

(6)index.htmlを変更。
ここが、一番多くの罠がいたので、注意点を記載していきます。
まずは、先に完成形を載せます。

gist8b09910fae59a15052da920667ed1861

(6-1)body以下にあるタグ名を自作のタグ名に変更
(変更前)

<my-app>Loading...</my-app>

(変更後)

<calendar-demo>Loading...</calendar-demo>

(6-2)ng2-bootsrapを読み込む。
bootstrap4はレイアウトが崩れるので、bootstrap3としました。

(追加した記述)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>

(6-3)SystemJSでのライブラリの読み込みを追加
momentはJavaScriptで扱う日付ライブラリです。

(追加した記述)

            "node_modules/ng2-bootstrap": {
                "defaultExtension": "js"
            },
            "node_modules/moment": {
                defaultExtension: 'js'
            }

(6-4)SystemJSでのライブラリの読み込みパスの別名をつけます。これにより、TypeScriptファイルからのimportの記述が短くなります。

(追加した記述)

       paths: {
            "ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap",
            "moment": "node_modules/moment/moment"
        }

これで、カレンダーUIのサンプルが動くはずです。
Angular2の基本的なセットアップは、下記の書籍をご参考に構築してみてください。

シェルスクリプトマガジン vol.37

シェルスクリプトマガジン vol.37

  • 作者: 當仲寛哲,岡田健,佐川夫美雄,大岩元,松浦智之,後藤大地,白羽玲子,水間丈博,濱口誠一,すずきひろのぶ,花川直己,しょっさん,法林浩之,熊野憲辰,桑原滝弥,USP研究所,ジーズバンク
  • 出版社/メーカー: USP研究所
  • 発売日: 2016/04/25
  • メディア: 雑誌
  • この商品を含むブログを見る

あるいは、途中までであれば、私の前回の記事も参考にしてみてください。
dke-msy-node.hatenablog.com