共享 Angular 2 应用程序，web/mobile-web/Ionic 2答案

【问题标题】：Shared Angular 2 application, web/mobile-web/Ionic 2共享 Angular 2 应用程序，web/mobile-web/Ionic 2
【发布时间】：2016-07-07 00:57:39
【问题描述】：

我似乎找不到在所有平台上使用相同的 Angular 2 代码的答案，比如 Angular 2 在他们的网站上推送。如果我有一个现有的网站（只有 node.js 服务器和 Angular 2 的骨架），我如何才能在不保留单独的 ionic 应用程序的情况下合并 ionic 2？反之亦然（我需要成为网络应用程序的离子应用程序）？

那里有各种答案，例如复制 ionic 应用程序的 www 文件夹，但我认为这不是最佳实践答案，因为您无法 100% 重用该代码。用大量相同的代码维护两个完全独立的代码库似乎违背了跨平台的论点。

【问题讨论】：

标签： javascript web-applications angular cross-platform ionic2

【解决方案1】：

维护两个似乎违背了跨平台的说法具有大量相同代码的完全独立的代码库。

您可以使用完全相同的代码，并通过使用platform information 来决定布局的显示方式：

Platform Name   Description
android on a device running Android.
cordova on a device running Cordova.
core    on a desktop device.
ios on a device running iOS.
ipad    on an iPad device.
iphone  on an iPhone device.
mobile  on a mobile device.
mobileweb   in a browser on a mobile device.
phablet on a phablet device.
tablet  on a tablet device.
windows on a device running Windows.

使用底层 platform 信息，您可以通过简单的操作来显示或隐藏 core 平台（网络应用程序）与否（移动应用程序）：

this.isWebapp = this.platform.is('core');

然后使用*ngIf 或您的应用程序中需要的任何内容。

关于样式：

Ionic2 使用模式来自定义组件的外观。每个平台有一个默认模式，但可以覆盖它。

同样，您可以根据显示应用的设备来控制应用的样式。就像您可以阅读 here 一样，在您的 body 元素中将添加一个类（core如果它是一个网络应用程序，或者ios/android/windows如果它是一个移动应用程序）。因此您可以为每个平台创建自定义样式，它们将被自动应用。

所以我认为您可以（并且应该）使用相同的代码来创建移动和网络应用程序，甚至使该应用程序在平板电脑或平板手机等其他设备上正常工作。

【讨论】：

酷，感谢您提供的信息，您是否使用这种方法使用 angular2 制作 web/iOS/android 应用程序？我也在研究 NativeScript 并试图决定使用哪个，Ionic 并不像 NativeScript 那样声称适用于所有三个，并且开始倾向于使用它。 link
我刚刚为移动设备创建了一些 simple 应用程序，但现在我正在参与一个更大的项目，我们正在遵循这种方法。关于您对 NativeScript 的评价，这两个框架都很棒，您将能够使用它们创建出色的应用程序，这正是您在使用框架时要寻找的东西。在我们的案例中，我们需要一个框架来让 Web 开发人员（比如我和我团队的其他成员）的学习曲线不那么陡峭，因此 Ionic2（和 angular2）非常适合我们。