基於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快速構建項目

一、安裝

npm install -g @angular/cli

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

ng new my-app

三、開啓服務

cd my-app
ng serve --open

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

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

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

第二步、引入ng-bootstrap

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

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

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

　 

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

當前只引入 echarts經常使用圖表

後續會持續更新經常使用的三方組件

最後

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

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