2015-05-28 2 views
6

Update 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; 
    } 

}); 

Update 1: Я нашел проблему

Поскольку файл настроек загружается async, иногда бывает, что модуль пытается использовать настройки перед их загрузкой. Я буду держать вас в курсе решений. Я переместил настройки в службу, что определенно лучше.

Оригинальный вопрос

Когда я Google, как сохранить параметры среды в AngularJS приложений, я сталкиваюсь варианты использования Grunt или Глоток (и там, наверное, другие тоже), но мне этот вариант кажется гораздо более очевидной. Это означает, что, вероятно, есть веская причина не использовать его. Является ли этот способ хранения настроек плохими идеями?

У меня есть в моем приложении корень файл с именем 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 игнорируется при регистрации. Весь метод действительно прямолинейный. Есть ли недостаток в этом дизайне?

ответ

9

Старайтесь не загрязнять $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 во все, что ее использует (как и во втором блоке кода).

+1

Я не могу найти причину «не загрязнять $ rootScope». Можете ли вы предоставить любую ссылку для чтения? –

3

В общем, вы должны избегать загрязнений rootScope, когда это возможно. Мне нравится, что вы загружаете настройки в app.run(). Как насчет введения службы настройки, которая заполняется в app.run, и может быть введена в другие контроллеры/службы? Это добавочное значение для макетирования во время модульных тестов.

Вот 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 {} 
}) 
Смежные вопросы