util-angular介绍

UI 技术选型

• Js语言

  • TypeScript

    TypeScript 是 微软开发的脚本语言, 扩展了弱类型的 Javascript,提供增强的语法和强类型支持.

    为编辑器代码提示和语法错误检测奠定坚实基础.

• Js框架

  • Angular

    Angular 是 Google开发的 Js框架.

    Angular使用 TypeScript 脚本语言开发, 并采用 RxJs 响应式编程框架.

    Angular 是前端Js三大框架之一,另外两个是 Vue 和 React.

    Util UI 用于开发管理后台,选择 Angular 是因为它的语法最优雅, 也最符合后端开发人员的习惯.

• Angular 组件库

  • Ng Zorro

    Ng Zorro 是阿里 Ant Design 的 Angular 版本,提供 80+ 常用组件,覆盖大部分业务开发场景.

  • Ng Alain

    虽然 Ng Zorro 提供了大量常用组件,但项目开发需要一个集成度更高的环境.

    Ng Alain 是一个基架项目, 集成了 Ng Zorro 组件,提供业务开发的项目模板,除了菜单导航等框架元素,还有很多开箱即用的业务处理页面模板.

• Angular 微前端框架

  • Angular Module Federation

    如果你的项目包含大量 Angular 模块,所有文件在同一个项目中,会导致开发环境卡顿和缓慢.

    发布项目也可能需要很长时间.

    另外,如果某个模块需要进行修改,哪怕只修改一行代码,也需要对所有模块重新发布.

    与后端的微服务类似,微前端是前端的项目拆分方法.

    微前端将不同的 Angular 模块拆分到不同项目中,可以独立开发,独立测试和独立部署.

    无论你是否使用微服务架构,均可使用微前端拆分方式.

    Angular Module Federation 是基于Webpack模块联合的Angular微前端解决方案.

Util Angular UI 特点

• 组件扩展支持

  除了支持 Ng Zorro 原生功能外,Util UI还对常用组件进行了扩展.

  最重要的扩展是支持常用组件直接发出 Api 请求,而不用定义额外的服务.

• Razor TagHelper 支持

  Util Angular UI不仅可以使用 html 页面,还能使用 .Net Razor 页面.

  Razor 页面可以使用 TagHelper 服务端标签.

  Util 已将大部分 Ng Zorro 组件封装为 TagHelper 标签.

  除了获得强类型提示外,TagHelper 作为抽象层,提供更简洁的标签语法.

  另一个强大之处在于Lambda表达式支持, 可以将DTO直接绑定到 TagHelper 标签上.

  能够从Lambda表达式提取元数据,并自动设置大量常用属性,比如name,验证,模型绑定等.

• 前后分离

  一些开发人员看到 Util Angular UI 使用 .Net Razor 页面,可能认为 UI 与 .Net 高度耦合,但现在的趋势是前后分离.

  所谓前后分离,是前端UI和后端API没有依赖,更换某一端对另一端没有影响.

  另外,前后分离后,前端UI和后端API可以由不同的开发人员完成.

  .Net Razor页面仅在开发阶段提供帮助,在发布时, Razor 页面会转换为 html ,后续发布流程与纯前端开发方式相同.

  一旦发布成功,将完全脱离.Net 环境,可以使用 Nginx 容器承载它.

  发布后的产物,与你使用纯前端方式开发打包没有区别.

  如果你喜欢,可以把后端API换成JAVA,也能正常运行.

• 配套Api支持

  前端UI和后端API的开发是两个完全不同的领域.

  但开发一个功能,又需要前端和后端的配合,他们需要沟通,作出一些约定.

  对于配合不到位的团队,前后端的沟通成本可能很高,另外提供的API可能无法满足UI的需求,从而让前端代码变得畸形.

  通常.Net开发人员的Js编程功底高于常规前端人员,前端人员更擅长样式布局.

  Util Angular UI 不仅提供对前端组件的封装,同时也为常见功能提供 Api 支持.

  对于使用 Util Angular UI 的团队, 将 UI 和 API 交给同一个.Net开发人员就是最好的选择.

  前端人员仅调整界面样式即可.

  不仅减少了沟通成本, API和前端组件的高度集成封装,让常规功能的开发效率得到大幅提升.

  当然,这对 .Net 开发人员的水平有一定要求.

• 本地化支持

  得益于 Ng Alain 本地化的良好设计, 可以使用 i18n 管道进行文本的本地化转换.

  '文本' | i18n
  

  不过对于需要支持本地化的项目,这依然是一个负担,每个表单项,每个表格项,每个文本,可能都需要添加 i18n 管道.

  Util Angular UI 让本地化开发更进一步,对大部分组件提供了本地化支持,只有极少数文本需要手工添加 i18n 管道.

• 授权访问支持

  Ng Alain提供了授权访问的支持.

  Util Platform权限模块基于资源和角色的设计,可以很好的与 Ng Alain授权进行集成.

  你可以控制菜单和任意区域根据权限显示和隐藏.

• 微前端支持

  Util Angular UI 引入了 Angular Module Federation , 能够将 Angular 模块拆分到不同项目中,可以独立开发,独立测试和独立部署.

  对于大中型项目,这是非常有必要的.

Util Angular UI 功能列表

Util Angular UI 主要由 util-angular 和 Util.Ui.NgZorro 两个库提供支持.

• util-angular 功能列表

  util-angular 是一个 Js 库, 由Curd组件基类, Ng Zorro常用组件扩展指令和一组工具类组成.

  • 基础类型

    • ViewModel - 视图模型基类
    • TreeViewModel - 树形视图模型基类
    • TreeNode - 树形节点基类
    • PageList - 分页列表
    • QueryParameter - 查询参数基类
    • TreeQueryParameter - 树形查询参数基类
    • Result - 服务端返回结果
    • StateCode - 服务端状态码约定
    • SelectItem - 列表项
    • SelectList - 列表
    • SelectOptionGroup - 列表配置组
    • SelectOption - 列表配置项

  • 工具类

    • 浏览器本地存储操作
    • Cookie操作
    • 事件总线操作
    • 本地化操作
    • Ioc操作
    • 加载操作
    • 路由操作
    • 弹出层操作
    • 抽屉操作
    • 表单操作
    • Http操作
    • Web Api操作
    • 消息操作
    • ...

  • Crud组件基类

    • 编辑组件基类
    • 表格编辑组件基类
    • 树形编辑组件基类
    • 查询组件基类
    • 表格查询组件基类
    • 树形表格查询组件基类

  • Ng Zorro指令扩展

    • 必填项验证扩展指令
    • 验证消息扩展指令
    • Ng Zorro 按钮扩展指令
    • Ng Zorro 选择框扩展指令
    • Ng Zorro 表格扩展指令
    • Ng Zorro 表格编辑扩展指令
    • Ng Zorro 树形表格扩展指令
    • Ng Zorro 树形扩展指令
    • Ng Zorro 上传扩展指令

• Util.Ui.NgZorro 库介绍

  Util.Ui.NgZorro 是一个 C# 类库,包含 TagHelper标签和树形控制器等类型.

  绝大部分 Ng Zorro 组件已经封装.

  由于组件很多,就不一一列出.

Util Angular UI 已知缺陷

所有已知缺陷均已解决.

Util Angular UI 适合你吗?

Util Angular UI 是为 .Net 全栈工程师准备的,如果你喜欢更简洁的语法,希望开发的成本更低,它就适合你.