Edited at

Angular2を手軽に始められるangular-cliから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


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

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

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)を使用する。

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

tooltip.gif


最後に

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

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

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

今回使用したリポジトリはこちらです。

github pageにもデプロイされているので、動作などはこちらからさわってみてください

https://hatappi.github.io/angular2-lightning/