ionic framework 整合 ngCordova

文章目录

最近手里的ionic app项目在交付阶段遇到了好些问题，其中有几个都很诡异，最气人的是network-infomation和toast插件经常不正常工作，这两个关键的功能是必不可少的，因此我也没想过要去做容错，所以直接就把app搞瘫痪了。

这一系列问题硬生生的花了我四天时间绕着弯去想临时办法解决它们。但是到network-infomation和toast的时候实在是绕不过了，于是只好静下心来思考方法。

原来在用jqmobi的时候从来没有出过这个问题，那十有八九都是因为angularjs了。虽然并不知道具体原因，但是早就知道ngCordova这个项目，只不过之前的ionic app都只是离线展示的作用，没有涉及到这么多功能，因此觉得这个项目对自己用处不大。

但是这次不同了，整合只花了1个多小时，却解决了我4天熬夜都没搞定的问题。值得反省啊！

整合起来很简单，只要在angular.js/ionic.bundle.js之后、cordova.js之前引入即可。

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--ngCordova-->
<script src="lib/utils/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

将其作为Angularjs的依赖注入到module中。

angular.module('myApp', ['ngCordova'])

如此，前期工作就做完了，剩下的就是根据插件列表中所需要的内容来添加插件和代码了。

例如，我需要判断在线还是离线，比我自己写方法还要简单，直接这样就行了。

$ionicPlatform.ready(function() {
    ...
    
    // listen for Online event
    $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
        alert('连上啦');
    })

    // listen for Offline event
    $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
        alert('掉线啦');
    })
    
    ...
}

嗯，夫复何求。