Angular2とBootstrapを始めてみる

プログラミング

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

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

20160926_files

npm start

で開始…。 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文を書きます。

import '../../../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js'

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

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

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

src/app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, Ng2BootstrapModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

arc/app/app.component.html

<h1>
  {{title}}
  <alert type="info">ng2-bootstrap hello world!</alert>
</h1>

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

20160926_ss

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

 

Spread the love
  •  
  •  
  •  

コメント

  1. […] ムワークとして、Bootstrapを使ってみました。(以前の記事) […]

タイトルとURLをコピーしました