Posted at

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

More than 3 years have passed since last update.

以前こちらに書いたものがあったのですが、

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/で下記のような画面になるはず

スクリーンショット 2016-06-16 23.22.15.png


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

特に何も手を加えることなく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

スクリーンショット 2016-09-28 1.21.59.png


最後に

今回はUIフレームワークをいれるところまでやりましたが、angular-cliがとにかく便利です。

プロジェクトを作成してくれるだけでなく、github pageのデプロイなどの機能をついています。

Angular2さわってみたいけど、どこからやろうかの人は実際にさわるのでおすすめです。