- 版本:5.1.0
- GitHub:
- NPM: https://npmjs.net.cn/package/tns-template-master-detail-progress-ng
- 下载
- 昨日: 0
- 上周: 0
- 上月: 0
基于 NativeScript 和 Angular 的主从详情模板
主从详情模板用于访问 Progress 数据对象后端。
应用模板可以帮助您利用内置 UI 元素和最佳实践快速启动原生跨平台应用。创建新应用时,可以节省重复编写样板代码的时间。
此主从详情模板是任何显示对象集合及其详情的应用程序的基本构建块。
主从详情模板支持 CRUD 操作、服务器过滤和服务器端排序,使用 OpenEdge 后端。以下认证模式可以使用:
- 匿名
- 基本认证
- 基于表单的认证
快速入门
执行以下命令以从模板创建应用程序
tns create my-app-name --template tns-template-master-detail-progress-ng
注意:此命令将创建一个新的 NativeScript 应用程序,该应用程序使用最新版本的模板发布到 [npm](https://npmjs.net.cn/package/tns-template-master-detail-progress-ng)。
如果您想创建一个使用模板 master
分支源的新应用程序,您可以执行以下操作:
tns create my-app-name --template https://github.com/progress/template-master-detail-progress-ng
演练
架构
模板具有以下组件:
/customers/customer-list/customer-list.component.ts
- 主列表组件。获取数据并在列表中显示。在项目点击时,它导航到项目详情组件。使用滑动操作删除项目。/customers/customer-detail/customer-detail.component.ts
- 项目详情组件。显示点击的项目详情。有一个编辑
按钮可导航到编辑组件。/customers/customer-detail-edit/customer-detail-edit.component.ts
- 项目详情编辑组件。为所选项目提供编辑选项。完成
按钮保存更改。此组件还提供了除更新操作之外的支持创建和删除操作。
有一个模型用于表示数据项
/customers/shared/customer.model.ts
模板还提供了一个数据服务
/customers/shared/customer.service.ts
- 作为主从数据项的数据层。封装了用于在 OpenEdge 数据库上执行操作的函数。
还有一个模型用于表示在编辑客户行时在 ListPicker 中使用的状态项
/customers/shared/state.model.ts
模板还提供了一个状态数据服务,用于从 OpenEdge 数据库检索状态项
/customers/shared/state.service.ts
样式
此模板已设置为使用 SASS 进行样式设置。所有使用的类都基于 {N} 核心主题。请参阅文档了解如何自定义它。查看它以了解您可以在哪个组件上使用哪些类。
它有 4 个全局样式文件,位于应用程序文件夹的根目录下
_app-variables.scss
- 存储在组件样式中导入的全球 SASS 变量。app.scss
- 全局通用样式表。这些样式规则应用于 Android 和 iOS。platform.android.scss
- 全局 Android 样式表。这些样式规则仅适用于 Android。platform.ios.scss
- 全局iOS样式表。这些样式规则仅应用于iOS。
每个组件在其文件夹中都有3个样式文件
_page-name.scss
- 组件通用样式表。这些样式规则应用于Android和iOS。page-name.android.scss
- 组件Android样式表。这些样式规则仅应用于Android。page-name.ios.scss
- 组件iOS样式表。这些样式规则仅应用于iOS。
获取帮助
NativeScript框架有一个充满活力的社区,当您遇到问题时可以提供帮助。
尝试加入NativeScript社区Slack。Slack频道是一个获取帮助调试问题的好地方,也可以与其他NativeScript开发者建立联系。
如果您发现此模板存在问题,请在问题中报告问题。
贡献
我们喜爱PRs,并乐意接受。请自由地提出更改和新想法。我们将进行审查和讨论,以便它们可以被接受和更好地整合。