Help us understand the problem. What is going on with this article?

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さわってみたいけど、どこからやろうかの人は実際にさわるのでおすすめです。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away