javascript - 共享 Angular 2 应用程序,web/mobile-web/Ionic 2

标签 javascript web-applications angular cross-platform ionic2

我似乎找不到在所有平台上使用相同的 Angular 2 代码的答案,例如 Angular 2 在他们的网站上推送。如果我有一个现有的网站(只有 node.js 服务器和 Angular 2 的骨架),我怎样才能合并 ionic 2 而不必保留单独的 ionic 应用程序?或者反之亦然(我需要成为网络应用程序的 ionic 应用程序)?

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

最佳答案

It seems to go against the argument of cross-platform to maintain two completely separate code bases with a lot of identical code.

您可以使用完全相同的代码,并通过使用 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 uses modes to customize the look of components. Each platform has a default mode, but this can be overridden.

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

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

关于javascript - 共享 Angular 2 应用程序,web/mobile-web/Ionic 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38216132/

相关文章:

c# - 开发 BlackBerry Web 应用程序(WebWorks 应用程序)的最佳方法是什么

Angular Typescript getter 和 setter 返回未定义

Javascript 单行调试

eclipse - 从已部署的 Eclipse Web 应用程序设置 Tomcat <Context> 参数

javascript - 如何合并这两个 forEach 循环(仅使用一个)?

web-applications - 如何在我的网络应用程序中处理时区?

angular - 如何通过 Angular ViewChildren 访问 SVG 元素

javascript - ng2-charts 更新标签和数据

javascript - 使用 JavaScript 和 jQuery 的简单长轮询示例

javascript - Google Chart API - 某些烛台的不同颜色