Question

我有一个使用AngularJS的phonegap应用程序。

在我的应用程序上，我使用NetworkStatus插件来确认手机正在使用的连接类型。

在我的根路由中，我正在解析对调用DeviceService的服务的调用，并且它负责访问navigator.network.connection.type并确定连接是打开还是关闭。 resove发送给控制器（通过路由解析功能）一个connectionState变量，它声明了连接的状态。

在那条路线上，如果Connection不可用，我想抛出错误。

话虽如此，我的问题是在访问路由后触发了DeviceReady事件。所以我的路线决定无法完成连接验证。

如何同步我的角度应用程序只会在触发DeviceReady事件后启动？

Answer 1

从AngularJs获取进样器模块错误通常意味着您错误地拼写了模块的名称，或者只是没有找到它。

如果Angular应用程序本身正常工作（例如未包含在phonegap中），则表示此问题与加载index.html时发生的事件顺序相同。

Cordova / PhoneGap加载您的索引页
其Webview解析并加载其脚本标记
如果某些代码未包含在函数或对象中，则会立即执行
Phonegap发送事件deviceready告诉您的应用，其本地代码的网桥已准备就绪

最后两个操作可以在两个订单中发生，但最常见于我给你的一个。因此，如果您通过ng-app将角度模块名称放在html或body标签上，angular会在找到它时尝试加载它。

因此，要使其发挥作用，您需要：

从html / body标记

YourAppName

正常创建角度模块（其名称必须在引导程序和模块调用中匹配）
使用deviceready事件作为触发器来提升应用程序

例如（简短的例子，除了头部的css）：

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
        {{2+2}}
        </div>
    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function onDeviceReady() {
            angular.bootstrap(document, ['YourAppName']);
        }, false);

        var YourAppName = angular.module('YourAppName', []);
    </script>
</body>

如果您想自己理解这一点，我建议您使用一些console.log来获取顺序。
您可以使用Chrome DevTools remote debugging，它可以很好地工作如果您的PC上有Chrome 32+，手机上有Android 4.4，或者只有PC，您可以在模拟器上进行调试。很高兴看到错误和东西。调试webview起初有点奇怪，但对跟踪错误非常有用！

希望这有帮助

Answer 2

您需要手动angular.bootstrap（而不是使用ng-app）：

 deviceReady = function() {
    angular.bootstrap(document, ['app']);
 };
 window.addEventListener('deviceready', deviceReady, false);

Answer 3

我正在使用以下解决方案，它允许在使用Cordova时运行AngularJS以及在浏览器中直接运行时 ，这是我开发的大部分内容。这确保了在Cordova / Phonegape准备就绪后Angular启动，并且在没有Cordova / PhoneGap的情况下仍能确保它正常工作。

// This is a function that bootstraps AngularJS, which is called from later code function bootstrapAngular() { console.log("Bootstrapping AngularJS"); // This assumes your app is named "app" and is on the body tag: <body ng-app="app"> // Change the selector from "body" to whatever you need var domElement = document.querySelector('body'); // Change the application name from "app" if needed angular.bootstrap(domElement, ['app']); } // This is my preferred Cordova detection method, as it doesn't require updating. if (document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1) { console.log("URL: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("URL: Running in browser"); bootstrapAngular(); }

如果您遇到http / https检测方法的问题，或许是因为将Cordova应用程序从网络加载到手机中，您可以使用以下方法：

// This method of user agent detection also works, though it means you might have to maintain this UA list if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) { console.log("UA: Running in Cordova/PhoneGap"); document.addEventListener("deviceready", bootstrapAngular, false); } else { console.log("UA: Running in browser"); bootstrapAngular(); }

当然，你仍然需要第一个例子中的bootstrapAngular函数。

Answer 4

您不应该使用此类变通办法。

＆＃34; cordova.js＆＃34;没有在浏览器中解析，因此＆＃34; deviceready＆＃34;事件永远不会被解雇。只需在浏览器控制台中手动调用它即可进行测试。

SELECT TOP 8
    spcDB.LOC, 
    spcDB.AREA_TYPE,
    Rnd(-Timer()*spcDB.LOC) AS [Rnd Generator] 
FROM 
    spcDB
WHERE 
    spcDB.AREA_TYPE = "211"
ORDER BY
    Rnd(-Timer()*spcDB.LOC)

UNION ALL

SELECT TOP 4
    spcDB.LOC, 
    spcDB.AREA_TYPE,
    Rnd(-Timer()*spcDB.LOC) AS [Rnd Generator] 
FROM 
    spcDB
WHERE 
    spcDB.AREA_TYPE = "231"
ORDER BY
    Rnd(-Timer()*spcDB.LOC)

在Phonegap deviceready之后初始化我的angularJs应用程序

4 个答案: