是否將變量存儲在$ rootScope良好實踐中？

Question

更新2：我發現了一個解決方案

我已經改變了設置文件只是一個JS文件，添加var tempSettings =到文件的開頭，並在index.html的補充它。這樣它就會加載最初的HTML，確保它在app.run運行時會存在。然後設置服務將這個tempSettings變量放入服務中。爲了清理，我刪除了tempSettings指針。

新建設置文件名爲settings.js

var tempSettings = { 
    "environment": "development", 
[...] 

添加到index.html的：

<script src="settings.js"></script> 

服務：

myApp.service("settings", function(){ 
    var settings = null; 

    this.initialize = function() { 
    settings = tempSettings; 
    tempSettings = undefined; 
    }; 

    this.get = function() { 
    return settings; 
    } 

}); 

更新1：我發現了一個問題

由於設置文件是異步加載的，因此有時會發生模塊嘗試在加載之前使用設置。我會及時更新解決方案。我已將設置轉移到服務中，這絕對更好。

原來的問題

當我谷歌如何存儲在AngularJS應用環境設置，我遇到選項使用咕嚕或咕嘟咕嘟（可能還有其他人也），但對我來說這個選項似乎更明顯。這意味着可能有一個不使用它的好理由。這種存儲設置的方式是一個壞主意嗎？

我在我的應用程序的根文件名爲settings.json這看起來是這樣的：

{ 
    "settingsFile": true, 
    "environment": "development", 
    "logLevel": "debug", 
    "userApiBase": "http://localhost/covlelogin/web/api/", 
    "oAuth": { 
    "google":{ 
     "endpoint": "https://accounts.google.com/o/oauth2/auth", 
     "clientId": "12345", 
     "scope": "email profile", 
     "state": "MyToken123", 
     "redirectUri": "http://localhost/loginadmin/web/oAuthRedirect", 
     "responseType": "code", 
     "approvalPrompt": "force" 
    } 
    } 
} 

然後我有一點點app.run，看起來像這樣：

MyApp.run(function ($rootScope, $http) { 
    //Load settings 
    $http.get('settings.json'). 
     success(function (settings) { 
     if (settings.settingsFile){ 
      $rootScope.settings = settings; 
      console.log("Settings loaded"); 
     }else{ 
      console.log("Error loading settings. File may be corrupt."); 
      //Additional error handling 
     } 
     }). 
     error(function (data) { 
     console.log("Error getting settings file."); 
     //Additional error handling 
     }) 
}); 

現在，無論何時我需要設置，我總是可以去$rootScope.settings.userApiBase或其他任何地方。這對我來說很合理，因爲我所要做的就是確保在檢入時忽略settings.json。整個方法非常簡單。這種設計有缺陷嗎？

Answer 1

儘量不要污染$rootScopeHere儘可能。改爲處理設置的設置服務。服務是單身對象，因此一旦您使用了服務，這些設置將在您注入服務的任何地方都可用。

MyApp.service("Settings", function($http) { 

    var settings = null; 

    this.initialize = function() { 
     $http.get('settings.json').success(function (s) { 
      if (s.settingsFile){ 
       settings = s; 
       console.log("Settings loaded"); 
      } else { 
       console.log("Error loading settings. File may be corrupt."); 
       //Additional error handling 
      } 
     }).error(function (data) { 
      console.log("Error getting settings file."); 
      //Additional error handling 
     }) 
    }; 

    this.get = function() { 
     return settings; 
    } 

    return this; 
}); 

而且在MyApp.run：

MyApp.run(function (Settings) { 
    Settings.initialize(); 
} 

然後，每當你想訪問Settings在控制器或其他服務或東西，只需撥打Settings.get()將返回您的設置。只要確保將Settings服務注入任何使用它的服務（就像我在第二個代碼塊中那樣）。

Answer 2

一般而言，您應儘可能避免污染rootScope。我喜歡你正在加載app.run（）中的設置。引入app.run中填充的SettingsService並且可以注入到其他控制器/服務中怎麼樣？這在單元測試期間具有可嘲笑的附加價值。

這裏是一個plunker

app.run(function(SettingsService) { 
    SettingsService.name = "Alex"; 
    SettingsService.password = "pw1"; 
}) 

app.controller('MainCtrl', function($scope, SettingsService) { 
    $scope.settings = SettingsService; 
}); 

app.factory('SettingsService', function() { 
    return {} 
})