Angular2とBootstrapを始めてみる

前にも記事を書いた通り、Angular2が出たので、使ってみました。
Angular2は一通りの機能をもっていますが、CSSフレームは含んでないので、Bootstrapを使うことにしました。 やっぱ、一番メジャーどころだし、Angular2との食べ合わせもいいかなってことでこれにしてみました。

まず、angular-cli でひな形を作って…(実作業はIntelliJのAngularJSプラグイン経由で)

20160926_files

で開始…。 http://llcaolhost:4200/ で表示確認したところ、ちゃんと表示されました。まずは表示されましたが、作成されるファイルが多くてなかなか全体を把握するのが大変そうです…。

次は、Angular2 で使える bootstrap…ということで、ng-bootstrap(https://valor-software.com/ng2-bootstrap/)を導入してみます。

https://github.com/valor-software/ng2-bootstrap#quick-start を参考に…と思いましたが、さっそく躓きました。 angular-cliで作成したひな形は、ドキュメントルートに node_modulesが無いんですね…。quick-start(が何か良く分かって無いけれども)と angular-cli は別物なんですね。

今回作ったひな形に合うように、またnode_modulesが無くても動くように記述してみました。

まず、jsファイルは、htmlからリンクするんじゃなくて、bundleの中に含まれるようにするために、src/app/shared/index.ts にimport文を書きます。

次に、自動生成されたファイルを見てみると、共通のCSSはsrc/styles.cssに書くようになっているようなので、こちらに bootstrapのCSSを読み込むように記述します。

これで、ng-bootstrap が使えるようになったはずなので、

src/app/app.module.ts

arc/app/app.component.html

と書き換えてあげて、再度 http://localhost:4200 を見ると・・・

20160926_ss

(゚∀゚)!・・・ちゃんと動きました。
とりあえず、ここまで・・・。慣れるまでは大変そうです。

 

“Angular2とBootstrapを始めてみる” への1件の返信

  1. ピンバック: WebStorm で angular2 のデバッグをしようとした話 – なおぶろ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*