yixiangling/abp-ng-zorro

阿里云的NG-ZORRO为组件基础，替换ABP 免费版前端

版本更新

此库已停止维护，请使用最新提供的ABP & ng-alain

ABP & ng-alain 支持最新版本的ng-alain、angular6、ABP免费模板4.0+

群内问题&回答整理

项目说明

这是一个用来替换ABP 免费模板中前端的项目。

ABP core免费版的默认angular工程使用到的UI组件替换成 ng-Zorro，无其他前端框架依赖，无ng-alain依赖。

后台框架：ABP

前端框架：依赖组件库 ng-Zorro

演示地址

ABP & ng-zorro-antd Demo 渣服务器，加载较慢，请轻撸！

登录帐号密码为ABP默认帐号密码admin/123qwe

angular文件较大，服务器带宽较小，需要多等待一下！！！

改动说明

由于有代码迁移，因此大量复制了delon的代码，在此向delon作者 cipchk 赠送小红花 🌺 表示感谢！

改动原则

保持ABP免费版默认模板结构和设计的前提尽可能多的迁移ng-alain与delon，现在的迁移方式是将使用到ng-alain与delon的代码直接复制到本项目下，并不直接依赖ng-alain与delon。

绝大部分改动保持ng-alain与delon相同使用接口，除非ng-alain与delon的原则与ABP相违背则会采用ABP设计方案

与ng-alain不同之处

本项目与ABP代码结构基本一致，因部分小伙伴是从ng-alain看到这的，因此在这描述一下重要的不同点。

• 项目采用了类似区域的概念（我也不知道该叫什么名字，暂时就叫区域吧，如果你知道官方的说法麻烦告诉我一声）即可以有多个app，本项目内src/account与src/app两个是同级别的模块，各自都有自己的layout、MenuService实例等，使用时可自行增加更多区域。
• 项目使用到的国际化、ACL等都采用ABP的方案。

具体改动内容

1. 前端主题采用ng-alain，代码存放在 src/theme
2. 保持默认模板代码结构，而非ng-alain代码结构
3. 移除了SignalR相关代码（因为我不用，如果需要请自行添加相关代码）
4. 增加MenuService用于管理应用程序菜单数据（此服务功能与delon/theme的MenuService实现有所不同）
5. 从delon迁移的组件存放在 src/shared/components下
6. 新增示范代码（src/app/pages/roles|users/*）目前只有这里的组件代码是符合ng-zorro规则，同时符合abp需要的代码。
7. 增加abp国际化与ng-zorro国际化关联，在切换abp语言时同时切换ng-zorro使用的语言（ng-zorro将发布07版本后此处实现也会同步修改）
8. 移除abp-ng2-module与abp-web-resources包，复制代码到/src/shared/abp下（因message,notify等部分服务需替换成使用ng-zorro的相关服务实现）同时移除jquery包。这样做可以进一步缩小首次加载文件体积
9. 已处理导航菜单深色主题

备注：当前正在等待ng-alain发布新版本后更新相关代码并同时升级ng-zorro

使用方法

现在本项目还没有项目生成器（我暂时也没打算写这个），要正确运行，需要替换从ABP官方创建的项目中angular所有代码需要针对你的项目名称内容进行一些修改。

与abp后端配对运行需要修改的文件

• src/shared/AppConsts.ts 这个文件的 defaultLocalizationSourceName 的值，如果你不知道填什么，那么参考你从ABP那创建的模板这个文件的值。
• src/app/layout/default/sidebar/sidebar-nav.component.ts 的菜单项目。
• src/app/pages/* 从别处copy来的代码，暂时占位用，代码写法上还未修改成ng-Zorro规格，暂时未添加abp模板中的全部内容。

其它

已引入大部分ng-alain的示例代码

主题切换功能暂只支持顶部颜色切换，因ng-zorro-antd本身没有主题，所以左侧导航栏无法切换颜色，ng-alain的sidebar-nav组件没有进行迁移

delon 组件迁移信息

从delon/abc迁移的组件存放在src/shared/components/*下，组件的使用方法参见delon 文档。

组件并非进行完整迁移，部分组件可能不会迁移或则迁移方式有所不同，具体参见组件迁移信息。

组件名称	是否迁移	说明
avatar-list	已迁移	用法一致
charts	已迁移	用法一致
count-down	已迁移	用法一致
desc-list	已迁移	用法一致
down-file	暂无计划	ABP默认后台并无与之匹配的功能
ellipsis	已迁移	用法一致
error-collect	暂无计划	没想好
exception	不迁移	ABP模板暂无此需求
footer-toolbar	不迁移	交由各区域在layout层面去实现
full-content	不迁移	交由各区域在layout层面去实现
global-footer	不迁移	交由各区域在layout层面去实现
image	不迁移	计划改写新的image组件
notice-icon	已迁移	用法一致
number-info	已迁移	用法一致
number-to-chinese	已迁移	用法一致
pro-header	已迁移	用法一致
result	已迁移	用法一致
reuse-tab	已迁移	无Menu相关内容(无menu和mode)，其余与delon相同
sidebar-nav	不迁移	交由各区域在layout层面去实现
simple-table	不迁移	每个人对于simple的理解和需要不同，暂不迁移
standard-form-row	已迁移	用法一致
tag-select	已迁移	用法一致
trend	已迁移	用法一致
utils	不迁移	与呈现相关的写pipe，与逻辑相关的写service，不迁移万能类
xlsx	不迁移	此功能交由后端完成
zip	不迁移	此功能交由后端完成

鸣谢

ABP ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点，它旨在成为一个通用的WEB应用程序框架和项目模板。

ng-zorro-antd admin panel front-end framework.

ng-alain 基于 Ng-zorro-antd 的解决方案

delon cipchk/delon是ng-alain的业务组件库

DonaldTdz/photostory （src/app/pages/*）部分代码来源

如果你喜欢这个项目，可以扫码打赏一下给服务器充点带宽 ^Q^

abp-ng-zorro's Issues

左侧主题切换

https://cipchk.github.io/ng-alain/dashboard/v1

大佬这个项目左侧主题可以切换，您看可以搞过来吧

群号是多少啊

群号是多少啊

为毛弹窗带闪光？

弹窗怎么总是闪一下？

npm install error

Error: write after end (writeStream "error") (writeStream "error"), GET https://cdn.npm.taobao.org/ace
-builds/-/ace-builds-1.4.1.tgz 200 (connected: true, keepalive socket: false, agent status: {"createSo
cketCount":52,"createSocketErrorCount":0,"closeSocketCount":50,"errorSocketCount":0,"timeoutSocketCoun
t":0,"requestCount":943,"freeSockets":{},"sockets":{"cdn.npm.taobao.org:443:::::::true::":2},"requests
":{}}, socketHandledRequests: 1, socketHandledResponses: 1)
headers: {"server":"Tengine","content-type":"application/octet-stream","content-length":"8649738","con
nection":"keep-alive","date":"Wed, 19 Sep 2018 02:42:55 GMT","x-oss-request-id":"5BA1B7AF7F911BE38CABB
08F","accept-ranges":"bytes","etag":""E2E01F4EBD0B4B15FDE2D9B754976DD2"","last-modified":"Tue, 07 Au
g 2018 20:06:12 GMT","x-oss-object-type":"Normal","x-oss-hash-crc64ecma":"15141884169936956505","x-oss
-storage-class":"Standard","cache-control":"max-age=0, s-maxage=86400","x-oss-server-time":"31","via":
"cache21.l2cm9[79,206-0,M], cache24.l2cm9[80,0], cache3.cn548[0,206-0,H], cache6.cn548[1,0]","age":"18
19","x-cache":"HIT TCP_MEM_HIT dirn:0:43994045 mlen:0","x-swift-savetime":"Wed, 19 Sep 2018 02:42:55 G
MT","x-swift-cachetime":"86400","timing-allow-origin":"*","eagleid":"dbee144615373267946473965e"}

upgrade to latest

ng-zorro 已经升级到1.1了，angular也到6.0了。请问还会继续更新本项目吗？

调用ServiceProxyModule失败，出错

怎么调用abp中ServiceProxyModule？

如何升级？

熊猫 假如我用这个做产品 如何升级呢？

upload组件 样式 和 官网不一样 选择图片后错位

import { Component } from '@angular/core';
import { NzMessageService, UploadFile } from 'ng-zorro-antd';

@component({
selector: 'nz-demo-upload-avatar',
template: <nz-upload class="avatar-uploader" nzAction="https://jsonplaceholder.typicode.com/posts/" nzName="avatar" nzListType="picture-card" [nzShowUploadList]="false" [nzBeforeUpload]="beforeUpload" (nzChange)="handleChange($event)"> <ng-container *ngIf="!avatarUrl"> <i class="anticon anticon-plus"></i> <div class="ant-upload-text">Upload</div> </ng-container> <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar"> </nz-upload>,
styles: [
:host ::ng-deep .avatar-uploader > .ant-upload { width: 128px; height: 128px; } :host ::ng-deep .ant-upload-select-picture-card i { font-size: 32px; color: #999; } :host ::ng-deep .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; }
]
})
export class NzDemoUploadAvatarComponent {
loading = false;
avatarUrl: string;

constructor(private msg: NzMessageService) {}

beforeUpload = (file: File) => {
const isJPG = file.type === 'image/jpeg';
if (!isJPG) {
this.msg.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.msg.error('Image must smaller than 2MB!');
}
return isJPG && isLt2M;
}

private getBase64(img: File, callback: (img: {}) => void): void {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}

handleChange(info: { file: UploadFile }): void {
if (info.file.status === 'uploading') {
this.loading = true;
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
this.getBase64(info.file.originFileObj, (img: string) => {
this.loading = false;
this.avatarUrl = img;
});
}
}
}

表格分页

表格分页有问题，点击页码后页码会变成只有1.

演示地址登录不了，用户被禁用了。