基於angular2x+ng-bootstrap構建后台管理系統界面

寫在前面的話

近來公司要做一個后台管理系統，人手比較少，於是作為一個前端也參與進來，其實據我所知，大部分的公司還是后台自己搗鼓的。 在后台沒有到位的情況下，前端應該使用什么技術也着實讓我為難了一把。經過短暫的調研，刷各種論壇，決定使用angular2x+bootstrap的方式去搭建后台管理系統。 用了大概一周，出於種種原因這方案被斃掉了，於是索性就寫個小demo（將持續完善）

目錄

• 預覽
• 環境配置
• 依賴於
• 項目結構介紹
• 項目搭建步驟
• 最后

預覽

項目預覽    進入 項目源碼

環境配置

需要安裝nodeJS環境

依賴於

• 1. webpack2   https://webpack.js.org/
• 2. angular4.0   https://angular.cn/docs/ts/latest/
• 3. bootstrap4   https://v4-alpha.getbootstrap.com/
• 4. ng-bootstrap1.0.0-alpha.25   https://ng-bootstrap.github.io/#/home

項目結構介紹

項目搭建步驟

第一步、angular-cli快速構建項目

1、安裝

npm install -g @angular/cli

2、打開終端窗口。運行下列命令來生成一個新項目以及應用的骨架代碼：

ng new my-app

3、開啟服務

cd my-app
ng serve --open

使用--open（或-o）參數可以自動打開瀏覽器並訪問http://localhost:4200/。

可參考官方文檔 angular-cli 快速起步

快速生成的時候可選擇是否要去安裝的angular的路由，在這個項目中是安裝了的

第二步、引入ng-bootstrap

1、npm install --save @ng-bootstrap/ng-bootstrap

2、import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

3、 @NgModule({
 declarations: [AppComponent, ...], 
 imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] 
}) 
export class AppModule { }

　 

第三步、引入第三方組件echarts

當前只引入 echarts常用圖表

后續會持續更新常用的三方組件

最后

這個項目只是一個很短的時間的demo，在項目中配置了路由模塊，已經http模塊，數據處理對於剛剛使用angular2x如果有一定幫助 ，就再好不過了
   當前這個項目比較粗糙，會持續完善！

轉載請注明原文地址！謝謝。