javascript - 如何使用远程脚本正确加载 Cordova 和 Angularjs 混合应用程序

标签 javascript angularjs cordova visual-studio-cordova

我们有一个使用 cordova 3.4.0 开发的单页混合应用程序和angularJS通过Hybrid app plugin(CPT2.0)在 Visual Studio 2013 中。
这个应用程序有一些嵌入式资源(jquery、AngularJS、Bootstrap 和一些专有代码),并且需要获取一些其他远程资源(AngularJS 模块、CSS 等)。 远程资源存储在 CDN 中并通过 asp.net 捆绑进行捆绑。

做出这一选择是因为先决条件是快速更新应用程序而不会延迟商店验证和发布,并且因为我们有一个响应式网站与此应用程序共享 Angular 模板和资源。

应用程序 html 主页有 <head>引用嵌入脚本的部分,对于远程脚本,我们在 dom 中编写一些脚本标签(使用 .append ),因为远程资源的基本 url 是存储在配置文件中的参数。

远程脚本加载后,应用程序必须等待cordova事件deviceready事件,当该事件被触发时,应用程序应该最终引导主 Angular 应用程序。

这是我们正在做的事情的基本示例:

<html>
    <head>

        <!-- embedded scripts-->
        <script type="text/javasript" src="scripts/jquery.js" />
        <script type="text/javasript" src="scripts/angular.js" />
        <script type="text/javasript" src="scripts/embeddedScript2.js" />
        <script type="text/javasript" src="cordova.js" />

        <!-- remote scripts-->
        <script type="text/javascript">
            // path to cdn bundle loaded from a xml config
            var serverbundle = 'http://loadedfromconfig.com/cdn/myBundleMobile.js';
            // path to angularjs bundle shared with website and loaded from xml config
            var angularbundle = 'http://loadedfromconfig.com/myBundleMobile.js';
            // simplified append to head of remote scripts with path composition
            $("head").append("'<script type='text/javascript' src='"+serverbundle+"'/>");
            $("head").append("'<script type='text/javascript' src='"+angularbundle+"'/>");

            // cordova events binded onload
            var app = {
                initialize: function(){
                    document.addEventListener("deviceready", onDeviceReady, false);
                },
                onDeviceReady: function(){
                    // manual bootstrapping of angularjs app, when all ready
                    angular.bootstrap(document, ['myApp']);
                }
            };

        </script>
    </head>
    <body onload='javascript: app.initialize()'>

        <!-- HTML and AngularJS directives -->
        <angular-directive />

    </body>
</html>

我的问题是: 同步远程资源加载的正确方法是什么,cordova deviceready和 Angular 引导?

上面的设计效果很好,但有时远程脚本未加载或 deviceready在正确加载所有模块之前提前启动并引导 Angular 应用程序。
我也尝试过更好地同步脚本加载和cordova,但没有成功,因为某些设计与所有树目标平台(ios、wp8 和 android)不兼容。

最佳答案

我手头没有任何示例代码,但在这种情况下我会做的是:

  • 将所有文件的初始版本与应用打包在一起。用户第一次运行应用时可能处于离线状态,因此无法远程加载脚本。

  • 应用启动时,查看设备是否在线。

  • 如果在线,请使用 $.ajax 从 CDN 下载新脚本,并使用 cordova 文件 API 将它们保存到文件系统。

  • 通过将脚本标记注入(inject)指向文件系统的页面,将下载的脚本添加到文档中。

  • 如果应用处于离线状态,请使用之前下载的脚本版本。

另外,请注意,Apple 不赞成这种动态加载应用程序代码的方式。如果他们在审核过程中发现这一点,他们可能会拒绝它。


编辑:

我刚刚重新阅读了您的代码,并意识到您正在将脚本元素添加到头部,然后立即初始化 Bootstrap 。

脚本的加载是异步的,因此您需要等待它们完成。 您可能想使用 require.js 或curl.js 等脚本加载器来加载这些远程脚本。他们应该提供一些通知,表明它们已完全加载。

关于javascript - 如何使用远程脚本正确加载 Cordova 和 Angularjs 混合应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25779744/

相关文章:

javascript - 关闭弹出窗口后缩放时传单错误

javascript - 将属性 Id 设置为 uibModal

ios - XCode 条形码扫描仪 Phonegap 自动对焦

javascript - 如何更改 AngularJS get 请求的结构?

JavaScript:有计划在未来的版本中实现线程吗?

javascript - 如何在 ui-router 的当前状态下绑定(bind)相关值?

cordova - 从 JavaScript 插件访问 config.xml 首选项

javascript - android 上的 html 输入框点击时有绿色突出显示

javascript - 如何在新选项卡中打开新页面并重定向当前页面

javascript - 无法使用第 3 方 API 出现错误,因为请求的资源上不存在 'Access-Control-Allow-Origin' header