Angular 2 Nativescript网络/移动应用程序

Question

我是角度2和原始脚本的新手。我想创建可以在网络和移动设备上运行的应用程序。我读到你可以使用这个框架共享代码，只是为了切换模板，但是没有教程或文档。所以，如果有人能给我一些开始的指示，我该怎么做呢。

谢谢！

Answer 1

tl; dr ：尽量不要在服务中添加任何特定于平台或UI的代码。然后可以在平台之间共享这些服务。

首先需要了解的是，在本机视图中，您不能像在普通浏览器中那样使用相同的标记（div，span，table等）。因此，您需要为Web和移动设备单独编码所有UI。

如果您遵循Angular 2的最佳实践，您就已将应用程序划分为组件，指令和服务。理想情况下，服务是应用程序的大多数逻辑所在。他们应该处理http，缓存，常用辅助方法，全局常量等。

如果这些服务不包含任何特定于平台的代码，则可以在Web和移动设备之间重复使用这些服务。例如，http由angular和nativescript-angular have the same api公开。因此，如果您通过http作为服务做某事，并且该服务不会处理任何UI元素（它不应该），那么该服务应该适用于Web和浏览器。您可以在Web和移动项目之间共享服务目录，并覆盖要为平台自定义的任何内容。

示例：假设您要从后端获取用户列表并将其显示为列表。理想情况下，您将拥有User服务，该服务具有get方法，可返回来自BE的json用户列表的承诺。

1. 对于移动设备，您的nativescript组件可能会使用ListView，导入User服务并使用get方法中的承诺来填充它。
2. 对于网络，除了您的组件可能在其模板中有<li>之外，一切都是相同的。

所有这些都是为了让您的服务尽可能不受平台特定代码的限制。

希望这有助于您开始如何构建应用程序以最大限度地重用代码。

Answer 2

我将跳过Akash已经介绍的内容，因为它对于角度2项目都很有用。好指点。我主要坚持使用Nativescript-Angular。

我建议您查看一些主动解决您描述的问题的入门模板。这将使您遵循他们的惯例，但总体而言，公约是好的，并在谷歌的建议之上。实际上，您最终得到一个项目空间，其中相同的服务在Web /移动/桌面上运行，并且UI专门针对所需的环境进行描述：

Nathan Walker的两个项目：

• angular2 advanced seed
• angular2 magic（demo）

Angular2魔术可能是一个更容易的起点。 Angular 2高级种子更灵活，但它确实意味着如果您不熟悉这些技术并包含项目，它会有更大的学习曲线。它有文档，很多人都在使用它，因此可以提供更多帮助。

Nativescript文档和教程确保您不会错过：

• NativeScript Angular guide - NativeScript-Angular入门+文档
• NativeScript snacks - NativeScript演示和指南

如果您的IDE是VS Code，那么还有一些值得安装的工具： https://marketplace.visualstudio.com/search?term=nativescript&target=VSCode&sortBy=Relevance

非常适合Nativescript-angular模板：

• NativeScript + Angular 2 Snippets for Visual Studio Code

目前为Angular2正在运行的RC3上的angular2-beta设计的angular2代码模板。视图模板仍然是一个很好的节省时间。

运行NativeScript：

• https://marketplace.visualstudio.com/items?itemName=Telerik.nativescript

我大多只使用它来启动调试器（并在VS Code内调试TypeScript）。大多数时候我仍然使用命令行来开发livesync。

Answer 3

要重复使用代码，您可以参考this blog。博客包含Github link，您也可以参考。我已下载该项目，它对我来说很好。你也可以参考截图。我没有改变项目中的任何内容。

您还可以查看my repository，这可能会有帮助。

我希望它会对你有所帮助。