ng alain的简单使用

1、创建一个空 angular 项目
 ng new demo --style less
2、添加 ng-alain 脚手架
 ng add ng-alain
3、运行项目
 ng serve -o

①.Module 模块
 生成一个 trade 模块:
 ng g ng-alain:module trade
②.业务页(增删改查)
 目前包含的业务组件页,包括:
 empty 空白页(待发布)
 list 列表页
 edit 编辑页
 view 查看页
 curd 列表、编辑、查看
 (例子:在 trade 下生成 list 列表页:
 ng g ng-alain:list list -m=trade)
③.列表显示
 [resReName]="{list:'data.data',total:'data.total'} [reqReName]="{pi:'page',ps:'per_page'}"(设置显示的数据,分页)
 url = `Article`;(后台路由接口)
 properties: {
      title(搜索条件字段): {
        type(字段类型): 'string',
        title(显示): '标题'
      }
    }(搜索条件)
④.修改及新增
 url = `Article`;(需配置接口)
 required:['title', 'category_id'],(设置必填项)
⑤.菜单的配置
 接口配置
 {
     text: '学校管理',(父类菜单)
     icon: 'anticon anticon-red-envelope',
     children: [
       {
         text: '注册学校管理',(子类菜单)
         link: '/university-reg/list',(对应的模块)
         icon: 'anticon anticon-ed-envelope',(图标)
       },
    ],
 },
 ------------------------------------------------------------------------------------------------
  {
     path: 'university-reg',(模块名称)
     loadChildren: './university-reg/university-reg.module#UniversityRegModule',(导入的类)
  },
 
 
 

你可能感兴趣的:(ng alain的简单使用)