在 Phonegap deviceready 之后初始化我的 angularJs 应用程序 [英] Initialize my angularJs App after Phonegap deviceready
问题描述
我有一个使用 AngularJS 的 phonegap 应用.
在我的应用中，我使用 NetworkStatus 插件来确认手机使用的连接类型.
在我的根路由上，我正在解析对调用 DeviceService 的服务的调用，它负责访问 navigator.network.connection.type 并决定连接是打开还是关闭.resove 向控制器发送(通过路由解析功能)一个 connectionState 变量，该变量声明连接的状态.
在那条路线上，如果连接不可用，我想抛出一个错误.
话虽如此，我的问题是在访问我的路线后会触发 DeviceReady 事件.所以我的路由无法完成连接验证.
如何同步我的 Angular 应用程序只会在 DeviceReady 事件触发后启动?
从 AngularJs 获取注入器模块错误通常意味着您拼错了模块的名称或 angular 根本没有找到它.
如果 Angular 应用程序本身可以正常工作(例如，当未包含在 phonegap 中时)，这意味着此问题与加载 index.html 时发生的事情的顺序有关.
- Cordova/PhoneGap 加载您的索引页
- 它的 Webview 解析它并加载它的脚本标签
- 如果某些代码没有包含在函数或对象中，则会立即执行
- Phonegap 发送事件
deviceready以告诉您的应用其与本机代码的桥接已准备就绪
最后 2 个操作可以在两个顺序中发生，但最常见的是我给你的一个.因此，例如，如果您通过 ng-app 将 angular 模块名称放在 html 或 body 标签上，angular 会在找到它时尝试加载它.
因此，要使其正常工作，您需要:
- 从 html/body 标签中删除
YourAppName - 正常创建 angular 模块(其名称必须在引导程序和模块调用中匹配)
- 使用
deviceready事件作为触发器来提升您的应用程序
例如(简短的例子，头部只有 css):
<div class="app"><h1>PhoneGap</h1><div id="deviceready" class="blink">{{2+2}}<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']);}， 错误的);var YourAppName = angular.module('YourAppName', []);
如果你想自己理解这一点，我建议你放一些console.log来了解事情的顺序.
你也可以使用 Chrome DevTools 远程调试，如果你有 Chrome 32+在您的 PC 和手机上的 android 4.4 上，或仅在 PC 和您在模拟器上调试.很高兴看到错误和内容.调试 webviews 一开始有点奇怪，但对于跟踪错误非常有用！
希望能帮到你
I have a phonegap app using AngularJS.
On my app I am using the NetworkStatus plugin to confirm the type of connection the mobile phone is using.
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.
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.
How can I sync up that my angular app will only start after DeviceReady event is fired ?
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.
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.
- 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
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 :
- 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
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>
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 !
Hope this helps
这篇关于在 Phonegap deviceready 之后初始化我的 angularJs 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
