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

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

javascript angularjs cordova

Javascript 如何使用远程脚本正确加载Cordova和Angularjs混合应用程序,javascript,angularjs,cordova,visual-studio-cordova,Javascript,Angularjs,Cordova,Visual Studio Cordova,我们使用visual studio 2013中的cordova 3.4.0和angularJS通过hybrid app plugin（CPT2.0）开发了一款单页混合应用程序。该应用程序有一些嵌入式资源（jquery、angularjs、bootstrap和少量专有代码），并且需要获取一些其他远程资源（angularjs模块、css等）。远程资源存储在CDN中，并通过asp.net绑定进行绑定之所以选择此选项，是因为前提条件是在不延迟商店验证和发布的情况下快速更新应用程序，并且因为我们有一

我们使用visual studio 2013中的

cordova 3.4.0

和

angularJS

通过

hybrid app plugin（CPT2.0）

开发了一款单页混合应用程序。
该应用程序有一些嵌入式资源（jquery、angularjs、bootstrap和少量专有代码），并且需要获取一些其他远程资源（angularjs模块、css等）。远程资源存储在CDN中，并通过asp.net绑定进行绑定

之所以选择此选项，是因为前提条件是在不延迟商店验证和发布的情况下快速更新应用程序，并且因为我们有一个与此应用程序共享角度模板和资源的响应网站

app html主页有一个

部分，该部分引用嵌入的脚本，对于我们在dom中编写的远程脚本，它有一些脚本标记（使用

.append

），因为远程资源的基本url是存储在配置文件中的参数

远程脚本加载后，应用程序必须等待cordova event

deviceready

事件，当触发此事件时，应用程序应最终引导主应用程序

这是我们所做工作的基本示例：

<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>


//从xml配置加载的cdn包的路径
var serverbundle=http://loadedfromconfig.com/cdn/myBundleMobile.js';
//与网站共享并从xml配置加载的angularjs包的路径
角状变种http://loadedfromconfig.com/myBundleMobile.js';
//使用路径组合简化附加到远程脚本头
$（“标题”）。附加（“”）；
$（“标题”）。附加（“”）；
//绑定到onload的cordova事件
变量应用={
初始化：函数（）{
文件。添加的监听器（“deviceready”，OnDeviceraddy，false）；
},
ondevicerady:function（）{
//angularjs应用程序的手动引导，准备就绪后
引导（文档，['myApp']）；
}
};

我的问题是: 同步远程资源加载、cordova

deviceready

和角度引导的正确方法是什么

上述设计非常有效，但有时远程脚本未加载或

devicerady

提前启动，并在所有模块正确加载之前引导应用程序。

我还尝试更好地同步脚本加载和cordova，但没有成功，因为有些设计与所有树目标平台（ios、wp8和android）不兼容。

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

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

另外，请注意，苹果不赞成这种应用程序代码的动态加载。如果他们在审查过程中发现，他们可能会拒绝

编辑：

我只是重新阅读了您的代码，意识到您正在向头部添加脚本元素，然后立即初始化引导

脚本的加载是异步的，因此您需要等待脚本完成。

您可能希望使用require.js或curl.js之类的脚本加载程序来加载这些远程脚本。他们应该提供一些已完全加载的通知。

此应用程序使用远程服务，需要连接。我们准备检查设备是否在cordova onOffline事件中脱机。如果设备脱机，用户将无法制作任何东西。如果设备脱机，用户将无法制作任何东西。当触发deviceready事件时，我们需要快速引导应用程序，以防止长时间加载。如果我们等待deviceready让scrip下载用户显示界面太晚，特别是如果他连接速度慢。我们需要的是异步加载脚本，同时加载cordova文件，但在加载所有远程脚本之前检查angular无法启动。好的，我已经看到了编辑。这就是问题所在，我们如何接收所有脚本正确加载的通知？有了requirejs，我们无法使用asp.net捆绑..更新：经过多次尝试后，最终我将所有脚本存储在本地存储中，在应用程序首次启动后，我检查所有脚本的哈希值，如果发生更改，我将下载并刷新本地存储脚本。