基于angular4+ng-bootstrap+bootstrap+scss的后台管理系统界面

描述

1. 在angular2刚才发布的不久，很多人不懂得怎么应用，直到现在也很多人不懂怎么用，
   于是我在余业时间做了这么一个后台管理系统页面，希望对大家有帮助！！
2. 从我个人的感觉来说，angular2语法很舒服，上手起来也比较快（可能是因为我有java方面的经验吧），但同jquery、react这些的思想有所不同，初学者还是要先去了解他们的语法与思想！！

开源地址

https://github.com/332557712/cc

主要的第三方引用

一个基于angular4.2.4+ng-bootstrap1.0.0-beta.4+bootstrap4.0.0-beta+scss的后台管理系统界面

更新情况

1. 搭建环境，分别加入ng-bootstrap1.0.0-alpha.25、bootstrap4.1.3、font-awesome4.7.0、animate.css3.5.2等，cc版本为0.0.1
   1.1 https://ng-bootstrap.github.i...

1.2 https://v4-alpha.getbootstrap...
1.3 http://fontawesome.io/
1.4 https://github.com/daneden/an...

1. 登录界面
   2.1 src/login/login.component.ts
2. 主页界面
   3.1 src/main/main.component.ts
3. 添加alert与confirm组件
   4.1 src/app/shared/modal/modal.service.ts
4. 添加toast组件
   5.1 src/app/shared/toast/toast.service.ts
5. 添加第三方ng-charts组件
   6.1 https://github.com/swimlane/n...
6. 添加第三方angular-2-dropdown-multiselect组件与angular2-select组件
   7.1 https://github.com/softsimon/...

7.2 https://github.com/basvandenb...

1. 添加层次图组件
   8.1 src/app/shared/hierarchy-view/hierarchy-view.component.ts
2. 添加第三方ng2-img-cropper组件
   9.1 https://github.com/search?q=n...
3. 添加头像更换功能
   10.1 src/main/avatar-cropper.component.ts
4. 添加http服务
   11.1 src/app/core/http.service.ts
5. 添加utils工具
   12.1 src/app/core/utils.ts
6. 添加pagination组件
   13.1 src/app/shared/pagination/pagination.component.ts
7. 添加http-pagination组件
   14.1 src/app/shared/pagination/http-pagination.component.ts
8. 添加spin组件
   15.1 src/app/shared/spin/spin.component.ts
9. 添加第三方angular2-ui-switch组件
   16.1 https://github.com/yuyang0410...
10. 添加时间轴样式
    17.1 assets/scss/base/_common.scss
11. 添加日期选择datepickerI18n配置
    18.1 src/app/shared/datepickerI18n/datepickerI18n.ts
12. 添加img-cropper-select指令
    19.1 src/app/shared/img-cropper-select/img-cropper-select.directive.ts
13. 添加tree组件
    20.1 src/app/shared/tree/tree.component.ts
14. 添加select-tree组件
    21.1 src/app/shared/tree/select-tree.component.ts
15. 添加jquery
16. 添加ztree组件
    23.1 src/app/shared/ztree/ztree.component.ts
17. 添加select-ztree组件
    24.1 src/app/shared/ztree/select-ztree.component.ts
18. 添加img-select-to-base指令
    25.1 src/app/shared/img-select/img-select-to-base.directive.ts
19. 添加switch组件
    26.1 src/app/shared/switch/switche.component.ts
20. 移除第三方angular2-ui-switch组件
21. 升级版本为0.0.2
22. 添加第三方ng2-file-upload组件
    29.1 http://valor-software.com/ng2...
23. 添加路由预加载策略，解决懒加载时首次使用卡顿问题
    30.1 可参考博客http://blog.csdn.net/rotating...
24. 添加custom-scrollbar.directive指令
    31.1 配置参考：http://manos.malihu.gr/jquery...
25. 添加image-viewer.directive指令
    32.1 配置参考：https://github.com/fengyuanch...

32.2 配置参考：http://www.cnblogs.com/yi0921...

1. 添加spin.component组件
   33.1 src/app/shared/spin/spin.component.ts与src/app/shared/spin/spin.service.ts
2. 添加部署Tomcat的方法
   34.1 参考下面的部署到Tomcat章节说明
3. 解决构建时使用--prod参数的报错问题,使用--prod --aot可提升性能，升级cc版本为0.0.3
4. 升级angular版本，使用yarn进行包版本管理，升级cc版本为0.0.4
5. 升级ng-bootstrap1.0.0-beta.4与bootstrap4.0.0-beta+scss版本，升级cc版本为0.0.5

6. 添加ng2-date-picker组件

   38.1 配置参考：https://github.com/vlio20/angular-datepicker

7. 添加localStorage.service与sessionStorage.service服务

   39.1 src/app/shared/storage/localStorage.service.ts
   39.2 src/app/shared/storage/sessionStorage.service.ts

8. 添加page-browser.component组件

   40.1 src/app/shared/page-browser/page-browser.component.ts

9. 添加editor.component组件

   41.1 src/app/shared/editor/editor.component.ts
   41.2 配置参考：https://quilljs.com/docs/modules/toolbar/

10. 将shared目录中的共享模块按具体模块拆分，升级cc版本为0.0.6

11. 添加第三方ag-grid组件

    43.1 配置参考:https://www.ag-grid.com/angular-getting-started/?framework=angular

12. 添加simple-data-table.directive指令以及相关组件

    44.1 src/app/shared/simple-data-table/simple-data-http-page.component
    44.2 src/app/shared/simple-data-table/simple-data-sort.component
    44.3 src/app/shared/simple-data-table/simple-data-table.directive

13. 补全各组件、指令、服务spec文件

14. 整理目录，升级cc版本为0.0.7

    46.1 business：业务功能目录
    46.2 business-service：业务功能服务目录
    46.3 business-shared：业务功能共享目录
    46.4 error-page：错误页面目录
    46.5 login：登录模块目录
    46.6 main：主体模块目录
    46.7 shared：公共组件共享目录

15. 添加color-picker.component组件

    47.1 src/app/shared/color-picker/color-picker.component.ts

16. 整理组件样式，将原来外部直接引入样式移动到组件内部引入，升级cc版本为0.0.8

17. 添加step.component组件

    49.1 src/app/shared/step/step.component.ts

18. 添加自定义验证器，正在完善中，目前示例参考修改密码功能

    50.1 src/app/shared/custom-validator/custom-validator.ts

19. 添加qrcode.component组件

    51.1 src/app/shared/添加qrcode/qrcode.component.ts
    51.2 配置参考https://github.com/neocotic/qrious

20. environments配置文件添加domain（域名）属性，根据不同环境的配置请求后端api
21. 添加proxy.config.json配置文件，有需要代理的自行在package.json的start中添加--proxy-config proxy.config.json
22. 添加email验证器
23. 添加url与number验证器

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!