初始化我的PhoneGap deviceready angularJs应用程序后， [英] Initialize my angularJs App after Phonegap deviceready
问题描述
我在使用AngularJS一个PhoneGap的应用程序。
I have a phonegap app using AngularJS.
在我的应用我使用的插件NetworkStatus确认手机正在使用的连接类型。
On my app I am using the NetworkStatus plugin to confirm the type of connection the mobile phone is using.
在我的根路径我解决到调用DeviceService服务的调用，并恕不承担访问navigator.network.connection.type，并决定如果连接是打开还是关闭。在resove发送到控制器（通过路由功能的决心）的声明连接状态的connectionState变量。
On my root route I am resolving a call to a Service which call DeviceService and it responsbile to access the navigator.network.connection.type and decide if the connection is on or off. the resove send to the controller (through route resolve functionality) a connectionState variable which declare the state of the connection.
在这条道路，我想抛出一个错误，如果连接不可用。
On that route I would like to throw an error if Connection is not available.
说了这么多，我的问题是我的路线被访问后的DeviceReady事件。所以我的路线解决无法完成连接验证。
Having said that, my problem is the the DeviceReady event is fired after my route is accessed. so my route resolve unable to complete the connection verification.
我怎么能同步上涨的DeviceReady事件被触发后，我的角应用才会开始？
How can I sync up that my angular app will only start after DeviceReady event is fired ?
推荐答案
充分利用AngularJs喷油器模块错误通常意味着你要么拼写错误的模块的名称或角度根本找不到它。
Getting the injector module error from AngularJs usually means that you either mispelled the name of the module or angular simply did not find it.
如果该角的应用程序正常工作自身（例如当PhoneGap的不裹），这意味着，这个问题是在载入您的index.html的事情发生的顺序。
If the Angular app works properly on its own (e.g when not wrapped in phonegap), this means that this issue is in the order the things happens when your index.html is loaded.
- 科尔多瓦/ PhoneGap的加载你的索引页
- 其网页视图对其进行解析，并加载它的脚本代码
- 如果一些code未包裹在函数或对象，它马上执行
- 的PhoneGap发送事件
deviceready来告诉你的应用程序，其桥梁与本地code准备
- Cordova/PhoneGap loads your index page
- Its Webview parses it and loads its scripts tags
- If some code is not wrapped in functions or objects, it's executed straight away
- Phonegap sends the event
devicereadyto tell your app that its bridges with native code are ready
最后2操作可发生在订单，但最常发生在一个我给你。
因此，如果你通过NG-的应用程序，例如把你的角模块名称上的HTML或body标签，角会尝试加载它，当它发现它。
The last 2 operations can occur in both orders but most often in the one I gave you. Thus, if you put your angular module name on the html or body tag through ng-app for instance, angular will try loading it when it finds it.
因此，它的工作，你需要：
So, for it to work, you need to :
- 删除
YourAppName从HTML / body标签 - 创建您的角模块正常（其名称必须在引导和模块调用匹配）
- 使用
deviceready事件作为触发自举应用程序
- Remove
YourAppNamefrom html/body tag - Create your angular module normally (its name must match in bootstrap and module calls)
- Use the
devicereadyevent as the trigger to boostrap your application
例如（短的例子，不过在CSS头）：
For example (short example, nothing but css in head) :
<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获得事物的秩序。结果
您可以使用ASLO 的Chrome DevTools远程调试其中工程pretty以及如果你有铬32+在您的PC和手机的Android 4.4，还是只有PC和调试的模拟器。很高兴看到这些错误和东西。
调试网页视图是有点起初很奇怪，但真正有用的跟踪误差！
If you want to understand this on your own, I recommend putting some console.log to get the order of things.
You can aslo use Chrome DevTools remote debugging which works pretty well If you have Chrome 32+ on your pc and android 4.4 on phone, or only pc and you debug on emulator. Quite nice to see the errors and stuff.
Debugging webviews is a bit strange at first but really useful to trace errors !
希望这有助于
这篇关于初始化我的PhoneGap deviceready angularJs应用程序后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
