Đang lưu các biến trong thực tiễn tốt $ rootScope?

Question

Cập nhật 2: Tôi đã tìm thấy giải pháp

Tôi đã thay đổi tệp cài đặt thành tệp JS, thêm var tempSettings = vào đầu tệp và thêm nó vào index.html. Bằng cách này nó được nạp với HTML ban đầu, đảm bảo nó sẽ tồn tại khi app.run đi. Các dịch vụ cài đặt sau đó có biến này tempSettings và đặt nó trong dịch vụ. Để dọn dẹp, tôi xóa con trỏ tempSettings.

thiết lập mới tập tin gọi là settings.js

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

Thêm vào index.html:

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

dịch vụ:

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

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

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

}); 

Cập nhật 1: Tôi tìm thấy một vấn đề

Vì tệp cài đặt được tải không đồng bộ, đôi khi điều đó xảy ra khi một mô-đun cố gắng sử dụng các cài đặt trước khi chúng được tải. Tôi sẽ cập nhật cho bạn về các giải pháp. Tôi đã chuyển các thiết lập vào một dịch vụ, điều đó chắc chắn tốt hơn.

gốc câu hỏi

Khi tôi google làm thế nào để lưu các thiết lập môi trường trong AngularJS ứng dụng, tôi đi qua tùy chọn sử dụng Grunt hoặc Gulp (và có lẽ những người khác cũng), nhưng đối với tôi tùy chọn này có vẻ nhiều hơn nữa rõ ràng. Có nghĩa là có thể có lý do chính đáng để không sử dụng nó. Đây có phải là cách lưu trữ các thiết lập không?

tôi có trong thư mục gốc ứng dụng của tôi một tập tin gọi settings.json mà trông giống như sau:

{ 
    "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" 
    } 
    } 
} 

sau đó tôi có một chút trong app.run trông như thế này:

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

Và bây giờ bất cứ khi nào tôi cần một thiết lập tôi luôn có thể đi đến $rootScope.settings.userApiBase hoặc bất cứ điều gì. Điều đó có ý nghĩa với tôi, bởi vì tất cả những gì tôi phải làm là đảm bảo cài đặt settings.json bị bỏ qua khi đăng ký. Toàn bộ phương pháp thực sự thẳng về phía trước. Có lỗ hổng nào cho thiết kế này không?

Answer 1

Cố gắng không để gây ô nhiễm $rootScopeHere càng nhiều càng tốt. Thực hiện dịch vụ Cài đặt để xử lý các cài đặt thay thế. Dịch vụ là các đối tượng đơn lẻ, do đó khi bạn initialize dịch vụ, cài đặt sẽ có sẵn ở mọi nơi bạn tiêm dịch vụ.

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

Và trong MyApp.run:

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

Sau đó, bất cứ khi nào bạn muốn truy cập Settings trong một bộ điều khiển hoặc một dịch vụ khác hoặc một cái gì đó, chỉ cần gọi Settings.get() đó sẽ trở lại các thiết lập của bạn. Chỉ cần đảm bảo tiêm dịch vụ Settings vào bất kỳ thứ gì sử dụng nó (như tôi đã làm trong khối mã thứ hai).

Answer 2

Nói chung, bạn nên tránh gây ô nhiễm rootScope khi có thể. Tôi thích rằng bạn đang tải các thiết lập trong app.run(). Điều gì về việc giới thiệu một SettingsService được điền trong app.run và có thể được đưa vào các bộ điều khiển/dịch vụ khác của bạn? Điều này có giá trị gia tăng được chế giễu trong các bài kiểm tra đơn vị.

Đây là một 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 {} 
})