Angular2を手軽に始められるangular-cliからUIフレームワークをいれるまで #JavaScript

現在のangular-cliはビルドツールがSystemJSからwebpackになったのでこれから始める方は
こちらを見てください

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

Angular2が動くまで

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

npm install -g angular-cli

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

typingsが入ってない場合はまずnpm install -g typingsでインストールしておいてください

ng new PROJECT_NAME

処理が終わった後に

ng serve

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

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

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

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

今回SalesforceがリリースしたCSSフレームワークのSalesforce Lightning Design System(SLDS)を使用する。
https://github.com/ng-lightning/ng-lightning

package.json

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

--- a/package.json
+++ b/package.json
@@ -20,10 +20,13 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "3.0.0-alpha.3",
+    "@salesforce-ux/design-system": "^1.0.0",
     "es6-shim": "0.35.1",
+    "ng-lightning": "^0.11.1",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
+    "tether": "^1.2.0",
     "zone.js": "0.6.12"
   },
   "devDependencies": {

angular-cli-build.js

build時の設定がかかれています。
ここで指定したものがdist配下のvendorの中にビルド時に
おかれます。

--- a/angular-cli-build.js
+++ b/angular-cli-build.js
@@ -15,7 +15,11 @@ module.exports = function(defaults) {
       'es6-shim/es6-shim.js',
       'reflect-metadata/**/*.+(ts|js|js.map)',
       'rxjs/**/*.+(js|js.map)',
-      '@angular/**/*.+(js|js.map)'
+      '@angular/**/*.+(js|js.map)',
+      'ng-lightning/**/*',
+      '@salesforce-ux/design-system/assets/**/*',
+      'ts-helpers/**/*',
+      'tether/**/*'
     ]
   });
 };

src/system-config.ts

ng-lightningを使用するためにmapの設定を行います。
ts-helpersなどはng-lightningを使用する際に使用するので一緒にmapに指定してあげます。

--- a/src/system-config.ts
+++ b/src/system-config.ts
@@ -7,10 +7,17 @@
  **********************************************************************************************/
 /** Map relative paths to URLs. */
 const map: any = {
+  'ng-lightning/ng-lightning': 'vendor/ng-lightning',
+  'ts-helpers': 'vendor/ts-helpers/index.js',
+  'tether': 'vendor/tether/dist/js/tether.js',
 };

 /** User packages configuration. */
 const packages: any = {
+  'ng-lightning/ng-lightning': {
+    defaultExtension: 'js',
+    main: 'ng-lightning.js'
+  },
 };

後はview部分を設定していきます。

src/index.html

このファイルはテンプレートファイルとなります。

先ほどangular-cli-build.jsに'@salesforce-ux/design-system/assets/**/*',を追記したので、
dist/vendor配下にディレクトリが出来たと思います。出来ていない場合はng buildをするなどしてみてください。
中にstylesheetが入っているので指定してあげます。

--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Hogehoge</title>
   <base href="/">
+  <link rel="stylesheet" href="vendor/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system-ltng.css">

   {{#unless environment.production}}
   <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
@@ -11,7 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="slds">
   <app-root>Loading...</app-root>

src/main.ts

このファイルがrootのファイルとなります。
svgPathを指定しているのは、デフォルトがassets/iconsなのですが、今回はvendor配下に
対象のディレクトリがあるので、そちらを指定してあげます。

--- a/src/main.ts
+++ b/src/main.ts
@@ -1,10 +1,12 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { AppComponent, environment } from './app/';
+import { provideNglConfig } from 'ng-lightning/ng-lightning';

 if (environment.production) {
   enableProdMode();
 }

-bootstrap(AppComponent);
-
+bootstrap(AppComponent, [
+  provideNglConfig({'svgPath': 'vendor/@salesforce-ux/design-system/assets/icons'}),
+]);

src/app/app.component.ts

ng-lightningのdirectivesをimportして指定します。

--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
+import { NGL_DIRECTIVES } from 'ng-lightning/ng-lightning';

 @Component({
   moduleId: module.id,
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styleUrls: ['app.component.css']
+  styleUrls: ['app.component.css'],
+  directives: [NGL_DIRECTIVES]
 })
 export class AppComponent {
   title = 'app works!';
+  selected: boolean = false;
 }

src/app/app.component.html

実際にhtmlに配置してみます

--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,13 @@
 <h1>
   {{title}}
 </h1>
+
+<div class="slds-text-heading--label slds-m-top--x-large slds-m-bottom--small">Stateful</div>
+<button type="button" nglButtonIcon [(nglButtonState)]="selected">
+  <ngl-icon icon="settings"></ngl-icon>
+</button>
+<button type="button" nglButton="neutral" [(nglButtonState)]="selected">
+  <ngl-icon icon="add" state="not-selected">Follow</ngl-icon>
+  <ngl-icon icon="check" state="selected">Following</ngl-icon>
+  <ngl-icon icon="close" state="selected-focus">Unfollow</ngl-icon>
+</button>

起動

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

ng serve

最後に

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

今回使用したリポジトリはこちらです。
github pageにもデプロイされているので、動作などはこちらからさわってみてください
https://hatappi.github.io/angular2-lightning/

Angular2を手軽に始められるangular-cliからUIフレームワークをいれるまで