5分で始めるAngular2とUIフレームワークをいれるまで

以前こちらに書いたものがあったのですが、
angular-cli のビルドツールがSystemJSからWebpackになったので
それ用に書き直したものです。

今回はAngular2をはじめる上でベースとなるプロジェクトを作成してくるangular-cliと、
UIフレームワークをいれるまでを紹介します。

Angular2が動くまで

まずはangular-cliをインストール

npm install -g angular-cli

プロジェクトを作ってみます

ng new PROJECT_NAME

処理が終わった後に

ng serve

で何もエラーがでなければ、http://localhost:4200/で下記のような画面になるはず

これで一旦セットアップ完了！

特に何も手を加えることなくAngular2がさわれる環境ができる

UIフレームワークをいれてみる

今回SalesforceがリリースしたCSSフレームワークのSalesforce Lightning Design System(SLDS)を使用する。

ng-lightningはSLDSのボタンやモーダルなどをAngular2のコンポーネントとして提供してくれるライブラリ

package.json

今回必要なng-lightningとSLDSに必要なcssやiconなどが入ったdesing-systemなどを追加します。

$ npm i @salesforce-ux/design-system --save
$ npm i ng-lightning --save

cssを読み込む

angular-cli.json に読み込ませたいcssを設定する
公式だとbootstrapで解説されている

--- a/angular-cli.json
+++ b/angular-cli.json
@@ -15,7 +15,8 @@
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.css"
+        "styles.css",
+        "../node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css"
       ],
       "scripts": [],
       "environments": {

NgModuleのimportsにmoduleをimportする

src/app.module.ts

import { NglModule, provideNglConfig} from 'ng-lightning/ng-lightning';

@NgModule({
  〜〜〜
  imports: [
    〜〜〜
    NglModule
  ],
  providers: [
    provideNglConfig()
  ],
  〜〜〜
})

サンプルコード記載

src/app/app.component.html

<ngl-badge>Badge</ngl-badge>
<ngl-badge type="default">Default</ngl-badge>
<ngl-badge type="info">Info</ngl-badge>
<ngl-badge type="success">Success</ngl-badge>
<ngl-badge type="warning">Warning</ngl-badge>
<ngl-badge type="error">Error</ngl-badge>

起動

サーバーを立ち上げたら終わりです

ng serve

最後に

今回はUIフレームワークをいれるところまでやりましたが、angular-cliがとにかく便利です。
プロジェクトを作成してくれるだけでなく、github pageのデプロイなどの機能をついています。
Angular2さわってみたいけど、どこからやろうかの人は実際にさわるのでおすすめです。