abp-ng-alain

基于ng-alain脚手架，增加对ABP服务端支持（ABP免费模板）

演示地址

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

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

支持说明

除http通信外，其余全部采用ng-alain脚手架所提供的方案；关于多语言、权限等所有内容均与ng-alain完全相同。

http通信采用的是已封装好针对abp有处理的http类，src/app/core/abp/abpHttp.ts

支持版本

支持ng-alain最新版ng-alain@next

支持ABP免费模板最新版本

ng-alain已支持到Angular6，使用前请ng -v检查你的Angular-cli版本

使用方法

1. 创建基于ng-alain的脚手架；请参考命令行工具了解更多细节。

ng new demo --style less
cd demo
ng add ng-alain@next --i18n

2. 安装新增依赖

npm install --save moment moment-timezone @types/moment @types/moment-timezone @types/lodash ngx-cookie-service
npm install --save-dev nswag

3. 复制补充文件

获取本项目代码，直接在根目录替换文件

4. 启动

下载ABP免费模板后，启动ABP服务端
ng serve

修改说明

服务器地址修改

src/assets/appconfig.json

菜单修改

src/assets/menu.json 菜单数据文件

如若你的导航菜单数据是由服务器端返回，那么请修改 src/app/core/abp/abp-configuration.service.ts文件中获取菜单数据部分的代码

service-proxies 更新

执行 nswag/refresh.bat 可更新接口访问代码，使用方法同ABP

多语言问题

切换到中文语言时仍有英文是因为免费模板提供的中文语言数据不全，只要自行补足即可。

增加的内容

组件名称	说明
translateFormat	新增的pipe，用于处理多语言带参数定义的转义

使用时的修改建议

• 由于配置与加载时机不同，免费模板提供的配置都是通过/AbpUserConfiguration/GetAll方法获得的，需要对该方法进行重写或另提供其他方法来获取符合ng-alain机制的配置。后台增加对应的方法后修改abp-configuration.service.ts文件内容即可

• 默认多语言切换免费模板是在启动时获得，修改语言会重刷界面，建议增加独立的获取多语言数据接口，后台增加对应方法后修改AbpTranslateLoader.ts文件

• 修改后台User对象，增加Avatar（用户头像），如若不需要可删除页面中显示头像的代码。

Links

• 文档
• @delon
• DEMO

学习改造abp前端文章推荐

诸葛小亮 abp & ng-alain 改造 适用学习目的新手学习观摩（PS:这文章不是我写的，群里同僚写的）