ABP前端使用阿里云angular2 UI框架NG-ZORRO分享
一、前言
前段时间写博客分享和介绍了阿里云的UI框架NG-ZORRO(博客请查看:http://www.cnblogs.com/donaldtdz/p/7892960.html),结合近段时间对.Net开源框架ABP的学习。完成将ABP前端框架替换成阿里云的NG-ZORRO。
二、替换说明
ABP版本采用的v3.3 .Net Core版本
Angular 版本5.0
三、注意事项
1、angular 2版本要5.0以上
2、需要安装
"abp-ng2-module": "^1.3.0"
"abp-web-resources": "^3.1.0"
3、其它abp依赖项也需要安装和配置
4、安装依赖包用yarn install(注:abp-ng2-module 和 abp-web-resources 需要yarn安装才能成功运行)
可参靠博客:http://www.cnblogs.com/donaldtdz/p/7705605.html
四、源码下载
ABP源码可以在官网生成模板项目,模板项目生成地址:https://aspnetboilerplate.com/Templates
ABP前端替换成NG-ZORRO的angular源码下载github:https://github.com/DonaldTdz/photostory/tree/dev/ngadmin
五、替换效果展示
注:替换只包括登录页面、主框架、页面导航、多语言、用户页面添、删、改、查,其它页面可以参考用户页面完成,由于时间关系,还不太完善,大家可以下载学习和参考。
替换前后效果:
登录页面


首页


用户管理




ABP前端使用阿里云angular2 UI框架NG-ZORRO分享的更多相关文章
- 前端福利:一套UI框架
阅读目录 背景 预览效果 表单组件 普通文本框 多行文本框 复选框 切换滑块 单选框 下拉选择框 数字输入框 时间选择 文件选择 显示文本 按钮 开源地址 背景 目前市场上有很多表单美化的UI,做的都 ...
- 收集几个Web前端UI框架
原文:http://www.isaced.com/post-200.html 关于Web前端UI库/框架,我觉得是非常方便的东西,对于我们这种业余的Web开发人员,有时候要写点前端代码的时候把UI框架 ...
- 前端UI框架小汇总
前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...
- 基于阿里云的JavaEE系统框架介绍
基于阿里云的系统框架展望 1) CDN 用于缓存静态文件等等.七牛和阿里的都还可以. 七牛要做的久一点,各种图片处理的接口要完善一些 阿里的CDN要稍微好一点点,但是没有不安全的访问方式,访问稍微没有 ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- 开发者必看!探秘阿里云Hi购季开发者分会场:海量学习资源0元起!
摘要: 开发者分会场致力于帮助开发者学习了解阿里云最新技术,为开发者设计全方位的技术成长与进阶之路. 2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: ...
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- 阿里云ECOS 集群方案
转载 https://it.toggle.cn/article_detail/7e6f674b2564d6c319f807b4fda87eac.html 架构说明 前端由阿里云SLB统一分发Web请求 ...
- 阿里云一 第一篇:云服务器ECS
阿里云(www.aliyun.com)创立于2009年,是全球领先的云计算及人工智能科技公司,为200多个国家和地区的企业.开发者和政府机构提供服务.截至2017年3月,阿里云付费云计算用户达87.4 ...
随机推荐
- [最短路][模版]P1346 电车
题目描述 在一个神奇的小镇上有着一个特别的电车网络,它由一些路口和轨道组成,每个路口都连接着若干个轨道,每个轨道都通向一个路口(不排除有的观光轨道转一圈后返回路口的可能).在每个路口,都有一个开关决定 ...
- opengl启动过程
GLuint _program = glCreateProgram(); //create shader program GLuint vertShader, fragShader;//顶点着色器,片 ...
- Animation-list,帧动画+属性动画,做出Flash般的效果
我们会用到PS,即使不会也不要怂,只需要几步傻瓜式操作即可. 属性动画可以看看我另一篇文章:属性动画详解 效果图 相信机智的各位,看完之后一定能发挥创意,做出更酷更炫的效果 图层获取 首先你需要找一张 ...
- 浅谈快速开发框架的分层(WinForm)
对于B/S都是MVC好不好 不多说了,反正大家都这么用 这里简单说下C/S 首先常用的几种: 模仿B/S的MVC 也有人称之为 MVP 还有MVVM这种真心觉得够够的了,当然也有其优势所在,这里不讨 ...
- 状态机编程思想(2):删除代码注释(目前支持C/C++和Java)
有时为了信息保密或是单纯阅读代码,我们常常需要删除注释. 之前考虑过正则表达式,但是感觉实现起来相当麻烦.而状态机可以把多种情况归为一类状态再行分解,大大简化问题.本文就是基于状态机实现的. 删除C/ ...
- 《Linux命令行与shell脚本编程大全》第十九章 初识sed和gawk
这两个工具能够极大简化需要进行的数据处理任务. 19.1 文本处理 能轻松实现自动格式化.插入.修改或删除文本元素的简单命令行编辑. sed和gawk就具备上述功能 19.1.1 sed编辑器 被称为 ...
- websocket介绍
websocket应用 手动实现的websocket 你所见过的websocket 你一定见过在网站中,有一个游客聊天的聊天框,比如人人影视.这个聊天框是如何实现即时通讯的呢,就是用到了websock ...
- AngularJS 拦截器实现全局$http请求loading效果
日常项目开发中,当前端需要和后端进行数据交互时,为了友好的UI效果,一般都会在前端加个loading的状态提示(包括进度条或者icon显示),数据传输或交互完成之后,再隐藏/删除loading提示. ...
- Android 7.0 中 ContentProvider 实现原理
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:汪毅雄 导语: 本文描述了ContentProvider发布者和调用者这两在Framework层是如何实现的. 作为Android的四大 ...
- Thinkphp高仿陌陌网页直播
此项目利用 TP+Redis+Nginx+nginx-rtmp-module+ffmpeg+HLS +Swoole 的架构方案 GitHub 地址:https://github.com/DOUBLE- ...