美文网首页ABP
abp & ng-alain 改造前端 七 —— 菜单

abp & ng-alain 改造前端 七 —— 菜单

作者: 诸葛_小亮 | 来源:发表于2018-06-30 14:05 被阅读69次

    介绍

    ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称,网址:http://aspnetboilerplate.com/
    ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/
    官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

    1. 目录:https://www.jianshu.com/p/589af988637c
    2. 源代码:https://github.com/ZhaoRd/abp-alain

    ng-alain菜单 加载方式

    ng-alain是在startup.service.ts文件中设置了菜单信息

    startup.service.ts
    设置菜单的代码如下
    菜单
    菜单数据时通过加载assets/tmp/app-data.json文件所得
    请求app-data.json
    app-data.json文件内容如下:
    app-data.json菜单项

    添加菜单项

    我们在app-data.json中添加菜单项:租户管理、用户管理、角色管理

    新增菜单
    菜单的格式格式是
    {
              "text": "角色",  # 名称
              "link": "/app/roles", # 路径
              "icon": "icon-grid", # 菜单图标
              "i18n":"roles" # 翻译
    }
    
    

    为了菜单能够正常工作,必须添加翻译信息,需要在下面两个文件中添加key为tenants-list、users、roles的翻译信息

    多语言文件
    en.json
    zh-CN.json

    运行结果

    英文
    中文

    我的公众号

    我的公众号

    源代码

    源代码:https://github.com/ZhaoRd/abp-alain

    相关文章

      网友评论

        本文标题:abp & ng-alain 改造前端 七 —— 菜单

        本文链接:https://www.haomeiwen.com/subject/xosuyftx.html