angularJS代码共享跨混合Ionic应用程序和常规移动网站

好吧，所以在我们的'创新实验室'，目前推动使用Ionic，一个混合的应用程序框架建立在科尔多瓦顶部的本地访问和angularJS'网页代码“。angularJS代码共享跨混合Ionic应用程序和常规移动网站

也有一些项目是纯粹的移动网络，例如使用Angular + bootstrap进行响应式设计。

事情是一些项目将需要有一个移动网站和原生应用程序（离子混合）。大多数功能和屏幕都是相同的，共享后端和大部分UI，但仍然会有一些差异。

所以我的问题是，如何构建一个项目，以便它既可以是一个离子项目，也可以是一个具有两种不同部署方法的正常角度网站。大多数代码被重用，但一些视图为移动网站和混合应用程序的一些视图（使用更多的本地组件和约定），也可能有一些路由差异。

这是一个好主意吗？

而在共享代码中，是否有一种简单的方法可以知道在哪种情况下你是？一些IF，一些指令在它们的上下文之外不活动等等。

感觉就像我可能没有意识到某种缺失的链接。

在此先感谢。

来源

2015-10-19 MikaelW

我正在处理同样的问题。我采用的方法是使用单独的模板，并在可能的情况下关闭device detection classes ionic adds to the body tag的CSS。

桌面版本（默认）

.your-style

手机版

.platform-webview .your-style {...} 
.platform-cordova .your-style {...}

有在Github上的存储库可能会提供一些指导。

https://github.com/jonathanwax/jw-ionic-desktop

为了从他的项目的源代码的报价，你会创建与模板的移动版本，每个视图的文件夹。

例如template.html的引导文件桌面版本看起来是这样的：

<div class="container"> 
    <h1 class="text-danger" id="helpHeader">Help Needed?</h1> 
    <li ng-repeat="help in vm.service.data"> {{ help.title }} - {{ help.content }}</li> 
</ul> 
<pre dir="ltr">HelpController: {{vm|json}}</pre>

这同一模板的离子移动版可位于移动/ template.html

<ion-view view-title="Help"> 
    <ion-content> 
     <ion-list> 
      <ion-item ng-repeat="help in vm.service.data"> 
       {{ help.title }} - {{ help.content }} 
      </ion-item> 
     </ion-list> 
</ion-content>

你可以创建一个条件，以如果您在科尔多瓦/移动环境中，请与您的路由器一起为移动模板提供服务。我觉得维护两个模板可能会成为开发地狱。这就是为什么离子在开发桌面时嗤之以鼻的原因 - 这是艰苦的工作！并容易出现错误。这几乎是一个捕蝇器（你知道的错误:)）。

我们可以尝试使用条件编写模板，但我怀疑不同的文件可能会有较少的开销。

有条件方法模板：

试验移动环境

var isMobile = ionic.Platform.isWebView();

在模板或查看HTML：

<{{isMobile ? 'ion-container' : ' div class="container"'}}>

或用途的NG-开关：

 <div ng-switch="expression"> 
     <div ng-switch-when="isMobile"> 
     CODE FOR MOBILE HERE 
     </div> 
     <div ng-switch-default> 
     CODE FOR DESKTOP HERE 
     </div> 
    </div>

根据您的应用程序，您可以避开大部分桌面应用程序使用离子指令。在需要时可以撒上桌面造型。真的不需要通过不同的移动/桌面模板来提供大量的代码。

来源

2015-10-20 03:08:22 Benson

angularJS代码共享跨混合Ionic应用程序和常规移动网站

回答

相关问题