当前位置: 首页 > 工具软件 > NG-Alain > 使用案例 >

ng-alain学习

宰宣
2023-12-01

前期准备

1、创建angular项目

ng-alain 是基于angular之上的,所以先建个angular项目demo,然后进入demo,安装依赖包(官网是先添加ng-alain后安装依赖的,好像有点问题)

ng new demo
cd demo
cnpm install

2、添加 ng-alain 脚手架

在创建完angular项目后add ng-alain脚手架(添加ng-alain 脚手架前确认Angular Cli版本,两者保持一致)

ng add ng-alain // 如果失败了可以npm install ng-alain --save

3、运行项目

npm start  // 或者ng serve --open 反正我一直用npm start

注意版本问题


ng-g 业务页

ng g ng-alain:[command name] [name] [options]
不按格式来可能会产生异常

1.生成模块

生成一个trade模块

ng g ng-alain: module trade

会在 routes/trade 生成两个文件 trade.module.ts、trade-routing.module.ts

模块内容包括了导入 SharedModule 以及一些统一性导入与导出的方式

2.业务页

  • empty 空白页
  • list 列表页
  • edit 编辑页
  • view 查看页
  • curd 列表、编辑、查看

下面以list为例:-m 表示指定list所在的模块

ng g ng-alain:list list -m=trade

指定view在sys模块的log组件下

ng g ng-alain:view view -m=sys -t=log

edit & view 页
对于 edit、view 默认是以模态框展示来生成,可以改用页面展示则:

ng g ng-alain:edit [page name] --modal=false

后续loading。。。

目前还是个前端小白(实习中),不足之处还望不啬指出! ^_^

 类似资料: