首页 文章

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

提问于
浏览 次
2

好吧，所以在我们的“创新实验室”中，目前有一种推动使用Ionic，一种基于Cordova Build 在本机访问之上的混合应用程序框架，以及用于'web代码'的angularJS .

还有一些项目是纯移动网络，例如使用Angular bootstrap进行响应式设计 .

问题是即将推出的一些项目需要同时拥有移动网站和本地应用程序（离子混合） . 大多数功能和屏幕都是相同的，共享后端和大多数UI，但仍然会有一些差异 .

所以我的问题是;如何构建项目，使其既可以是离子项目，也可以是具有2种不同部署方法的普通角度网站 . 大多数代码被重用，但移动网站的一些视图和混合应用程序的一些视图（使用更多的本机组件和约定），也许一些路由差异 .

这是一个好主意吗？

在共享代码中，有一种简单的方法可以知道您在哪种情况下？一些IF，一些指令在其上下文之外不活动等 .

感觉有一些我可能不知道的缺失链接 .

提前致谢 .

angularjs twitter-bootstrap cordova ionic hybrid

1 回答

  • 1

    我'm working on this same problem. The approach I'm采取的是使用单独的模板，并在可能的情况下，关闭CSS关闭device detection classes ionic adds to the body tag .

    桌面版（默认）

    .your-style

    手机版

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

    Github上有一个存储库可能会提供一些指导 .

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

    要引用其项目中的源代码，您可以使用模板的移动版本为每个视图创建一个文件夹 .

    例如，您的bootstrap桌面版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>

    这个相同模板的离子移动版本可以位于mobile / 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>

    如果您处于cordova /移动环境中，则可以创建条件以使用路由器来为移动模板提供服务 . 我觉得维护两个模板可能是开发地狱 . 这就是为什么离子在为桌面开发时嗤之以鼻 - 这是一项艰苦的工作！而且容易出错 . 它几乎是一个捕蝇草（你知道错误:)） .

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

    模板的条件方法：

    测试移动环境

    var isMobile = ionic.Platform.isWebView();

    在模板或视图中html：

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

    或者使用ng-switch：

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

    根据您的应用程序，您可以在大多数桌面应用程序中使用ionic指令 . 您可以在需要时使用桌面样式 . 实际上，实际上不需要由不同的移动/桌面模板提供大量代码 .

    回复于

相关问题