Question

我们在visual studio 2013中通过cordova 3.4.0使用angularJS和Hybrid app plugin(CPT2.0)开发了单页混合应用。
这个应用程序有一些嵌入式资源（jquery，angularjs，bootstrap和几个专有代码），并需要获得一些其他远程资源（angularjs模块，CSS和更多）。远程资源存储在CDN中，并通过asp.net捆绑捆绑。

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

app html主页有一个引用嵌入式脚本的<head>部分，以及我们用dom一些脚本标签写的远程脚本（使用.append），因为远程资源的基本URL是一个参数存储在配置文件中。

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

这是我们正在做的基本样本：

<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和角度自举的正确方法是什么？

上面的设计运行良好，但有时远程脚本未加载或deviceready提前启动并在所有模块正确加载之前启动角度应用程序。
我还试图更好地同步脚本加载和cordova，但没有成功，因为有些设计与所有树目标平台（ios，wp8和android）不兼容。

Answer 1

我手边没有任何示例代码，但在这种情况下我会做的是：

使用该应用程序打包所有文件的初始版本。用户可能在第一次运行应用程序时处于脱机状态，因此无法远程加载脚本。
在应用开始时，查看设备是否在线。
如果在线，请使用$ .ajax从CDN下载新脚本，并使用cordova文件API将其保存到文件系统。
通过将脚本标记注入指向文件系统的页面，将下载的脚本添加到文档中。
如果应用处于离线状态，请使用之前下载的脚本版本。

另外，请注意Apple对这种动态加载应用代码感到不满。如果他们在审查期间发现它，他们可能会拒绝它。

编辑：

我只是重新阅读你的代码并意识到你正在将脚本元素添加到头部，然后立即初始化bootstrap。

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

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

1 个答案: