Question

我是Angular / Ionic的新手。在使用Angular / Ionic之前，在我的应用程序启动时，我正在检查我们是否在Phonegap或浏览器下使用并将此信息存储在全局布尔变量中，然后检查应用程序是在线还是离线并将其存储到全局变量也是如此：

var isPhoneGap;
var connectionStatus;
isPhoneGap = checkIfPhoneGap();

//later in the code :

connectionStatus = checkIfOnline();

function checkIfPhoneGap() {
    var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
    if ( app ) {
        return true;
    } else {
        return false;
    }
}
function checkIfOnline() {  
    if ( isPhoneGap ) {
        if (checkConnection() == "none" ) {
            connectionStatus = 'offline'; 
        } else {
            connectionStatus = 'online';
        }
        function checkConnection() {
            var networkState = navigator.network.connection.type;
            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.NONE]     = 'No network connection';
            //console.log('Connection : ' + Connection);
            //console.log('Connection type: ' + states[networkState]);
            return networkState;
        }
    } else {
        connectionStatus = navigator.onLine ? 'online' : 'offline';
    }
    return connectionStatus;
}

现在我想对Angular / Ionic做同样的事情，我知道我必须使用＆＃34; Service＆＃34;。但这是通过所有代码提供此信息的最佳方式吗？

我正在做以下事情，但这是＆＃34;最佳做法＆＃34; ？

index.html中的

：

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>

在services.js中：

angular.module('SnowBoard.services', [])

.factory('isPhoneGap', function() {

    var appp = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
    if ( appp ) {
        return true;
    } else {
        return false;
    }

})

;

app.js中的

：

angular.module('SnowBoard', ['ionic', 'SnowBoard.controllers', 'SnowBoard.services'])

.run(["isPhoneGap","$ionicPlatform", function(isPhoneGap, $ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });

  //CHECK IF ONLINE
  connectionStatus = checkIfOnline(isPhoneGap);

  //DEBUG
  //var debugOptionUseLocalDB=0;
  //updateProDB(connectionStatus, debugOptionUseLocalDB);
}])
.config(function($stateProvider, $urlRouterProvider) {
//...all state configurations
})
.config(function($stateProvider, $urlRouterProvider) {
//...
});

现在可以使用，但是我需要布尔isPhoneGap在我需要的任何地方都可用（几乎在我的应用程序的任何地方）。

你能收敛到最佳做法吗？

由于

Answer 1

您不应使用$rootScope设置变量，并尽量避免使用$scope。使用LocalStorage是可以的，但这些数据会持续存在。我建议使用SessionStorage设置工厂来存储和检索变量。 SessionStorage与您打开的标签相关联，因此数据在关闭时就会消失。

这是我的会话存储服务之一。我抛出$cookieStorage以防本地存储空间不可用。此外，localStorage只能存储字符串。这就是为什么你会看到我根据需要在JSON之间转换对象和数组的原因。注入sessionService之后，我只需要调用sessionService.store(name, data)来存储会话变量，或者sessionService.persist(name, data)来存储持久数据，例如userName，如果＆＃34;记住我＆＃34;检查。：

.service('sessionService', ['$cookieStore', function ($cookieStore) {
    var localStoreAvailable = typeof (Storage) !== "undefined";
    this.store = function (name, details) {
        if (localStoreAvailable) {
            if (angular.isUndefined(details)) {
                details = null;
            } else if (angular.isObject(details) || angular.isArray(details) || angular.isNumber(+details || details)) {
                details = angular.toJson(details);
            };
            sessionStorage.setItem(name, details);
        } else {
            $cookieStore.put(name, details);
        };
    };

    this.persist = function(name, details) {
        if (localStoreAvailable) {
            if (angular.isUndefined(details)) {
                details = null;
            } else if (angular.isObject(details) || angular.isArray(details) || angular.isNumber(+details || details)) {
                details = angular.toJson(details);
            };
            localStorage.setItem(name, details);
        } else {
            $cookieStore.put(name, details);
        }
    };

    this.get = function (name) {
        if (localStoreAvailable) {
            return getItem(name);
        } else {
            return $cookieStore.get(name);
        }
    };

    this.destroy = function (name) {
        if (localStoreAvailable) {
            localStorage.removeItem(name);
            sessionStorage.removeItem(name);
        } else {
            $cookieStore.remove(name);
        };
    };

    var getItem = function (name) {
        var data;
        var localData = localStorage.getItem(name);
        var sessionData = sessionStorage.getItem(name);

        if (sessionData) {
            data = sessionData;
        } else if (localData) {
            data = localData;
        } else {
            return null;
        }

        if (data === '[object Object]') { return null; };
        if (!data.length || data === 'null') { return null; };

        if (data.charAt(0) === "{" || data.charAt(0) === "[" || angular.isNumber(data)) {
            return angular.fromJson(data);
        };

        return data;
    };

    return this;
}])

$ cookieStore是ngCookies的一部分。确保包含angular-cookies.js并像任何模块一样加载ngCookies。 Angular ngCookies

Answer 2

首先，我对Ionic和Angular都很陌生，但是我的网络应用Angular遇到了同样的问题，我已经完成了以下工作

将变量分配给$rootScope，这样所有控制器都可以看到
将变量分配给$scope，这是当前上下文可见的。例如：控制器和html页面使用该控制器
localStorageService，因为即使在用户刷新页面后，这也会保留值。

请再次注意，这是我在Angular网络应用中所做的，可能不是最佳做法，但我希望你明白这一点。

Answer 3

ionic.Platform中提供了一些方法，可帮助您获取有关设备类型所需的数据。

http://ionicframework.com/docs/api/utility/ionic.Platform/

你可以选择添加ngCordova，它包含一些围绕cordova插件的有用包装器，包括设备插件。

http://ngcordova.com/docs/#Device

angularjs离子和全局变量：使变量在全球范围内可用的最佳实践

3 个答案: