从angular-cli开始轻松地进入Angular2，并安装UI框架
如果你打算从现在开始学习Angular-cli，因为构建工具已经从SystemJS改为了webpack，就请参考下面的链接。
我将介绍一下如何使用angular-cli创建一个基于Angular 2的项目，并且如何添加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 Lightning Design System（SLDS），这是Salesforce发布的CSS框架。您可以在https://github.com/ng-lightning/ng-lightning中找到它。
package.json文件
我們將添加包含所需的 ng-lightning 和 SLDS 的設計系統，其中包含必要的 CSS 和圖標，以應對本次的需求。
--- 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的中文本地化释义
在这里编写了构建时的设置。在这里指定的内容会在构建时放置在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等相关内容一起指定到map中，以便在使用ng-lightning时一同使用。
--- 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'
+ },
};
接下来，我们将进行视图部分的设置。
src/index.html的中文翻译是”主页/index.html”。
这个文件是模板文件。
刚才在angular-cli-build.js中添加了’@salesforce-ux/design-system/assets/**/*’这一行，所以我认为dist/vendor目录下应该有一个新的文件夹。如果没有的话，请尝试执行ng build等命令进行操作。文件夹中包含了样式表，请指定它们。
--- 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>
主要（源）.ts
这个文件将成为根文件。指定了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的指令并进行指定。
--- 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 部分
我将实际将其放置在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页面部署。
如果有想要尝试Angular2但不知从何处着手的人，我真心推荐你们亲自去试试。
这次使用的仓库在这里。
由于已经部署在Github页面上，您可以从这里体验其功能等。
https://hatappi.github.io/angular2-lightning/
