从零开始使用Angular2和UI框架的过程只需5分钟

以前我在这里写过一篇东西，但是由于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/应该显示如下屏幕。

这样就完成了一次设置！

不需要做任何修改，就可以使用Angular2的环境。

尝试安装UI框架。

使用Salesforce发布的CSS框架Salesforce Lightning Design System（SLDS）来进行此次。

ng-lightning是一个库，它将SLDS的按钮、模态框等作为Angular2的组件提供给我们使用。

包描述文件。

我們將添加必要的ng-lightning和SLDS設計系統，其中包含所需的CSS和圖標等。

$ 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` 中导入模块

src/app.module.ts的改写为中文的选项：

import { NglModule, provideNglConfig} from 'ng-lightning/ng-lightning';

@NgModule({
  〜〜〜
  imports: [
    〜〜〜
    NglModule
  ],
  providers: [
    provideNglConfig()
  ],
  〜〜〜
})

提供样本代码

应用程序组件.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>

开启

一旦服务器启动，就算完成了。 , jiù .)

ng serve

最终

這次我們已經完成了將UI框架整合進來的部分，而angular-cli真的非常方便。
它不僅能夠幫我們建立專案，還提供了GitHub頁面部署等功能。
對於想要試試Angular2但不知從何下手的人來說，實際動手操作是非常推薦的。