当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 00:28:28 HTML5

angular2发布没多久,很多人都不知道怎么用,到现在也有很多人不知道怎么用,所以利用业余时间做了这样一个后台管理系统页面,希望可以会对大家有所帮助!!个人感觉,angular2的语法很舒服,上手也比较快(可能是有java经验),但是和jquery、react不同,初学者还是要先了解一下。他们的语法和思想!!开源地址https://github.com/myopenreso...主要第三方参考了一个基于angular4.2.4+ng-bootstrap1.0.0-beta.4+bootstrap4.0.0-beta+scss环境的后台管理系统界面更新,添加ng-bootstrap1.0.0-alpha.25、bootstrap4.1.3、font-awesome4.7.0、animate.css3.5.2等,cc版本为0.0.11.1https://ng-bootstrap.github.i...1.2https://v4-alpha.getbootstrap...1.3http://fontawesome.io/1.4https://github.com/daneden/an...登录屏幕2.1src/login/login.component.ts首页界面3.1src/main/main.component.ts添加alert和confirm组件4.1src/app/shared/modal/modal.service.ts添加toast组件5.1src/app/shared/toast/toast.service.ts添加三方ng-charts组件6.1https://github.com/swimlane/n...添加第三方angular-2-dropdown-multiselect组件和angular2-select组件7.1https://github.com/softsimon/...7.2https://github.com/basvandenb...添加层级图组件8.1src/app/shared/hierarchy-view/hierarchy-view.component.ts添加第三方ng2-img-cropper组件9.1https://github.com/search?q=n...添加头像替换功能10.1src/main/avatar-cropper.component.ts添加http服务11.1src/app/core/http.service.ts添加utils工具12.1src/app/core/utils.ts添加分页组件13.1src/app/shared/pagination/pagination.component.ts添加http-pagination组件14.1src/app/shared/pagination/http-pagination.component.ts添加spin组件15.1src/app/shared/spin/spin.component.ts添加第三方angular2-ui-switch组件16.1https://github.com/yuyang0410...添加时间轴样式17.1assets/scss/base/_common.scss添加日期选择datepickerI18n配置18.1src/app/shared/datepickerI18n/datepickerI18n.ts添加img-cropper-select指令19.1src/app/shared/img-cropper-select/img-cropper-select。directive.ts添加树组件20.1src/app/shared/tree/tree.component.ts添加选择树组件21.1src/app/shared/tree/select-tree.component.ts添加jquery添加ztree组件23.1src/app/shared/ztree/ztree.component.ts添加select-ztree组件24.1src/app/shared/ztree/select-ztree.component.ts添加img-select-to-base指令25.1src/app/shared/img-select/img-select-to-base.directive.ts添加switch组件26.1src/app/shared/switch/switche.component.ts移除第三方angular2-ui-switch组件升级版本到0.0.2添加第三方ng2-file-upload组件29.1http:///valor-software.com/ng2...添加路由预加载策略,解决第一次使用懒加载时卡顿的问题。30.1可以参考博客http://blog.csdn.net/rotating...添加custom-scrollbar.directive指令31.1配置参考:http://manos.malihu.gr/jquery...添加image-viewer.directive指令32.1配置参考:https://github.com/fengyuanch...32.2配置参考:http://www.cnblogs.com/yi0921...添加spin.component组件33.1src/app/shared/spin/spin.component.ts和src/app/shared/spin/spin.service.ts添加部署Tomcat的方法34.1参考下面DeployingtoTomcat章节讲解如何解决使用--prod参数的问题在施工期间。使用--prod--aot可以提升性能,升级cc版本到0.0.3,升级angular版本,使用yarn进行包版本管理,升级cc版本升级ng-bootstrap1.0.0-beta.4和bootstrap4。0.0-beta+scss版本升级到0.0.4,升级cc版本到0.0.5,添加ng2-date-picker组件38.1配置参考:https://github.com/vlio20/ang...添加localStorage.service和sessionStorage.service服务39.1src/app/shared/storage/localStorage.service.ts39.2src/app/shared/storage/sessionStorage.service.ts添加page-browser.component组件40.1src/app/shared/page-browser/page-browser.component.ts添加editor.component组件41.1src/app/shared/editor/editor.component.ts41.2配置参考:https://quilljs.com/docs/modu...更改shared目录中的共享模块按照具体模块进行拆分,升级cc版本为0.0.6并添加第三方ag-grid组件43.1配置参考:https://www.ag-grid.com/angul...添加简单数据表.directive和相关组件44.1src/app/shared/simple-data-table/simple-data-http-page.component44.2src/app/shared/simple-data-table/simple-data-sort.component44.3src/app/shared/simple-data-table/simple-data-table.directive完成components,instructions,servicespec文件的目录,升级cc版本到0.0.746.1business:业务功能目录46.2business-service:业务功能服务目录46.3business-shared:业务功能共享目录46.4error-page:错误页面目录46.5login:登录模块目录46.6main:主模块目录46.7shared:公共组件共享目录addcolor-picker.componentcomponent47.1src/app/shared/color-picker/color-picker.component.ts整理组件样式,将原来的外部直接导入样式移动到组件内部导入,升级cc版本到0.0.8和添加step.component组件49.1src/app/shared/step/step.component.ts添加自定义验证器,正在完善中,当前示例参考修改密码功能50.1src/app/shared/custom-validator/custom-validator.ts添加qrcode.component组件51.1在src/app/shared/中添加qrcode/qrcode.component.ts51.2配置参考https://github.com/neocotic/q...environments在配置文件中添加domain(域名)属性,请求后端根据不同环境的配置,在api中添加proxy.config.json配置文件,如果需要代理,在package.json开头添加--proxy-configproxy.config.json,添加email验证器添加一个url和数字验证器