一個基於Angular4+Bootstrap4+Scss的後臺管理系統界面
一個基於Angular4+Bootstrap4+Scss的後臺管理系統界面，正在不斷的開發中，有興趣的朋友能夠到個人github下載，github地址：點擊進入githubcss
一直在不斷的更新中，最新的狀態以github爲準！node
歡迎加入羣進行技術討論，羣號：168733660 。
css3
CC admin
一個基於angular4.1.3+ng-bootstrap1.0.0-alpha.25+bootstrap4.0.0-alpha.6+scss的後臺管理系統界面git
更新
- 搭建環境，分別加入ng-bootstrap1.0.0-alpha.2五、bootstrap4.1.三、font-awesome4.7.0、animate.css3.5.2等
1.1) https://ng-bootstrap.github.io/#/home
1.2) https://v4-alpha.getbootstrap.com/
1.3) http://fontawesome.io/
1.4) https://github.com/daneden/animate.css - 登陸界面
2.1) src/login/login.component.ts - 主頁界面
3.1) src/main/main.component.ts - 添加alert與confirm組件
4.1) src/app/shared/modal/modal.service.ts - 添加toast組件
5.1) src/app/shared/toast/toast.service.ts - 添加第三方ng-charts組件
6.1) https://github.com/swimlane/ngx-charts - 添加第三方angular-2-dropdown-multiselect組件與angular2-select組件
7.1) https://github.com/softsimon/angular-2-dropdown-multiselect
7.2) https://github.com/basvandenberg/ng-select) - 添加層次圖組件
8.1) src/app/shared/hierarchy-view/hierarchy-view.component.ts - 添加第三方ng2-img-cropper組件
9.1) https://github.com/search?q=ng2-img-cropper&type=Code&utf8=%E2%9C%93 - 添加頭像更換功能
10.1) src/main/avatar-cropper.component.ts - 添加http服務
11.1) src/app/core/http.service.ts - 添加utils工具
12.1) src/app/core/utils.ts - 添加pagination組件
13.1) src/app/shared/pagination/pagination.component.ts - 添加http-pagination組件
14.1) src/app/shared/pagination/http-pagination.component.ts - 添加spin組件
15.1) src/app/shared/spin/spin.component.ts - 添加第三方angular2-ui-switch組件
16.1) https://github.com/yuyang041060120/angular2-ui-switch - 添加時間軸樣式
17.1) assets/scss/base/_common.scss - 添加日期選擇datepickerI18n配置
18.1) src/app/shared/datepickerI18n/datepickerI18n.ts - 添加img-cropper-select指令
19.1) src/app/shared/img-cropper-select/img-cropper-select.directive.ts - 添加tree組件
20.1) src/app/shared/tree/tree.component.ts
規範
- 爲避免衝突，應用css使用c-爲前綴
- 爲避免衝突，應用組件selector使用c-爲前綴
- 目錄、文件名命名使用小寫字母，多個單詞使用-間隔
- module結尾的爲模塊、component結尾的爲組件、service結尾的爲服務、directive結尾的爲指令
- 全部模塊放在modules目錄下、全部應用級服務以及工具類等放在core目錄下、全部資源文件放在assets目錄下，全部scss文件所模塊區分，放在assets/scss/modules下
環境
- 您須要安裝nodeJS環境
安裝
- cd E:\project\cc <—- 進入到項目全部的目錄
- npm install <—- 安裝，若是下載比較慢，可以使用淘寶的cnpm，請參考：https://npm.taobao.org/
開發服務器
- cd E:\project\cc <—- 進入到項目全部的目錄
- npm start <—- 使用npm命令運行
- 瀏覽器中輸入
http://localhost:4200/<—- 本機訪問
構建
- npm build <—- 使用npm命令構建，構建完成後會在dist目錄中
單元測試
- npm test <—- 使用npm命令測試，目前的模塊中沒有加入測試代碼，須要自行添加
特別聲明
- 若是本界面中使用到了您的產品或是對您形成了影響請及時聯繫我，我將第一時間去除
技術交流
- 在github進行交流
- 技術交流羣：168733660
貢獻
- 站在巨人的肩膀上，纔可以走得更遠，感謝那些默默貢獻的人！