在PhoneGap设备后初始化我的angularJs应用程序

前端之家收集整理的这篇文章主要介绍了在PhoneGap设备后初始化我的angularJs应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用AngularJS的手机应用程序。

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

在我的根路线上,我正在解决一个调用DeviceService的服务,并且它负责访问navigator.network.connection.type,并确定连接是开或关。 resove将控制器(通过路由解析功能)发送给一个声明连接状态的connectionState变量。

在该路由上,如果Connection不可用,我想抛出一个错误

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

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

从AngularJ获取注射器模块的错误通常意味着您或者拼写了模块的名称,或者没有找到它的角度。

如果Angular应用程序自己正常工作(例如,当没有包装在phonegap中)时,这意味着这个问题是在您的index.html加载时发生的事情。

> Cordova / PhoneGap加载您的索引页
>它的Webview解析它并加载它的脚本标签
>如果某些代码不包含在函数或对象中,那么它将立即执行
> Phonegap发送事件设备告诉你的应用程序,它的桥接与本地代码准备好了

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

所以,为了工作,你需要:

>从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这个工作相当不错如果你的电脑和Android 4.4手机上的Chrome 32,或者只有pc和你在模拟器上调试。很高兴看到错误和东西。
首先调试网页浏览有点奇怪,但是跟踪错误非常有用!

希望这可以帮助

猜你在找的Angularjs相关文章