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

我是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做同样的事情,我知道我必须使用“服务”.但这是通过所有代码提供此信息的最佳方式吗？

我正在做以下事情,但这是“最佳做法”吗？

在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在我需要的任何地方都可用(几乎在我的应用程序中的任何地方).

你能收敛到最好的做法吗？

谢谢

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

这是我的会话存储服务之一.我抛出$cookie存储以防本地存储不可用.此外,localStorage只能存储字符串.这就是为什么你会看到我根据需要在JSON之间转换对象和数组的原因.注入sessionService之后,我只需调用sessionService.store(name,data)来存储会话变量或sessionService.persist(name,data)来存储持久数据,即如果选中“Remember Me”则存在userName. ：

.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);
        }
    };

    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

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

猜你在找的Angularjs相关文章