NativeScript 与 Angular Master Detail 模板

应用模板可以帮助您利用内置 UI 元素和最佳实践，快速启动原生跨平台应用。在创建新应用时，节省重复编写样板代码的时间。

此 Master-Detail 模板是任何需要显示对象集合及其详细信息，并在在线和离线模式下利用 Kinvey 作为后端工作的应用的基石。该模板使用 RadListView 组件显示主列表。RadListView 组件是 Progress NativeScript UI 的一部分。

主要功能

可编辑的 Master-detail 界面
与 Kinvey 数据库集成
离线工作
可自定义主题
用户体验和开发最佳实践
易于理解的代码

快速入门

执行以下命令从该模板创建应用：

tns create my-master-detail-kinvey-ng --template tns-template-master-detail-kinvey-ng

注意：此命令将创建一个使用最新版本的该模板发布的 [npm] (https://npmjs.net.cn/package/tns-template-master-detail-kinvey-ng) 的 NativeScript 应用。

如果您想创建一个使用模板的 master 分支源的新应用，您可以执行以下操作：

# clone nativescript-app-templates monorepo locally
git clone [email protected]:NativeScript/nativescript-app-templates.git

# create app template from local source (all templates are in the 'packages' subfolder of the monorepo)
tns create my-master-detail-kinvey-ng --template nativescript-app-templates/packages/template-master-detail-kinvey-ng

教程

架构

应用组件

/src/app/app.component - 设置页面路由出口，让您在页面之间导航。

该模板有以下组件：

/src/app/cars/car-list.component - 主列表组件。获取数据并在列表中显示。在项目点击时，导航到项目详细信息组件。
/src/app/cars/car-detail/car-detail.component - 项目详细信息组件。显示点击的项目详细信息。有一个 编辑 按钮可导航到编辑组件。
/src/app/cars/car-detail-edit/car-detail-edit.component - 项目详细信息编辑组件。为选中项目提供编辑选项。点击 完成 按钮保存更改。

有一个模型来表示数据项

/src/app/cars/shared/car.model

该模板还提供了一个数据服务

/src/app/cars/shared/car.service - 作为主-detail 数据项的数据层。包装用于在数据库上执行操作的功能。

Kinvey 集成

该模板使用 {N} Kinvey 插件。初始化在 src/app/app.module.ts 文件中通过 KinveyModule 引入完成。

[可选] Kinvey 数据库设置

按设计，该应用连接到 Kinvey 中的示例数据的只读副本。如果您想看到“编辑”功能的实际操作，您必须克隆示例数据并更新应用配置，使其指向您自己的 Kinvey 设置。您可以在这里找到如何实现此操作的详细说明。

样式

此模板已配置为使用SASS进行样式设计。所有使用的类均基于{N}核心主题 - 咨询文档了解如何自定义它。

它包含3个全局样式文件，位于应用文件夹的根目录下

/src/_app-common.scss - 全局通用样式表。这些样式规则应用于Android和iOS。
/src/app.android.scss - 全局Android样式表。这些样式规则仅应用于Android。
/src/app.ios.scss - 全局iOS样式表。这些样式规则仅应用于iOS。

每个组件在其文件夹中有3个样式文件

../_{page-name}.component.scss - 组件通用样式表。这些样式规则应用于Android和iOS。
../{page-name}.component.android.scss - 组件Android样式表。这些样式规则仅应用于Android。
../{page-name}.component.ios.scss - 组件iOS样式表。这些样式规则仅应用于iOS。

获取帮助

NativeScript框架有一个充满活力的社区，可以在您遇到问题时提供帮助。

尝试加入NativeScript社区Slack。Slack频道是解决问题和与其他NativeScript开发者交流的绝佳场所。

如果您发现此模板存在问题，请在NativeScript仓库中报告问题。

贡献

我们热爱Pull Requests，并且乐于接受。请随时提出更改和新想法。我们将进行审查和讨论，以确保它们被接受并更好地整合。

注意：请注意，master分支可能引用了尚未在NPM上发布的依赖项！