Biến toàn cục trong AngularJS

Tôi có một vấn đề trong đó tôi đang khởi tạo một biến trên phạm vi trong bộ điều khiển. Sau đó, nó được thay đổi trong bộ điều khiển khác khi người dùng đăng nhập. Biến này được sử dụng để kiểm soát những thứ như thanh điều hướng và hạn chế quyền truy cập vào các phần của trang web tùy thuộc vào loại người dùng, vì vậy điều quan trọng là nó giữ giá trị của nó. Vấn đề với nó là bộ điều khiển khởi tạo nó, được gọi lại bởi một số góc và sau đó đặt lại biến trở về giá trị ban đầu.

Tôi cho rằng đây không phải là cách khai báo và khởi tạo các biến toàn cầu chính xác, nó không thực sự toàn cầu, vì vậy câu hỏi của tôi là cách nào là đúng và có bất kỳ ví dụ hay nào xung quanh hoạt động với phiên bản hiện tại không?

Về cơ bản, bạn đã có 2 tùy chọn cho các biến "toàn cầu":

• sử dụng $rootScope http://docs.angularjs.org/api/ng.$rootScope
• sử dụng dịch vụ http://docs.angularjs.org/guide/service

$rootScopelà cha mẹ của tất cả các phạm vi nên các giá trị được hiển thị sẽ hiển thị trong tất cả các mẫu và bộ điều khiển. Sử dụng $rootScoperất dễ dàng vì bạn có thể chỉ cần đưa nó vào bất kỳ bộ điều khiển nào và thay đổi giá trị trong phạm vi này. Nó có thể thuận tiện nhưng có tất cả các vấn đề của các biến toàn cục .

Các dịch vụ là các singletons mà bạn có thể đưa vào bất kỳ bộ điều khiển nào và hiển thị các giá trị của chúng trong phạm vi của bộ điều khiển. Các dịch vụ, là những người độc thân vẫn là "toàn cầu" nhưng bạn đã kiểm soát tốt hơn nhiều về những nơi được sử dụng và tiếp xúc.

Sử dụng dịch vụ phức tạp hơn một chút, nhưng không nhiều, đây là một ví dụ:

var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
  return {
      name : 'anonymous'
  };
});

và sau đó trong một bộ điều khiển:

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;
}

Đây là jsFiddle hoạt động: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

Nếu bạn chỉ muốn lưu trữ một giá trị, theo tài liệu Angular trên Nhà cung cấp , bạn nên sử dụng công thức Giá trị:

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

Sau đó sử dụng nó trong một bộ điều khiển như thế này:

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
}]);

Điều tương tự có thể đạt được bằng cách sử dụng Nhà cung cấp, Nhà máy hoặc Dịch vụ vì chúng "chỉ là đường cú pháp trên đầu công thức của nhà cung cấp" nhưng sử dụng Giá trị sẽ đạt được những gì bạn muốn với cú pháp tối thiểu.

Tùy chọn khác là sử dụng $rootScope, nhưng nó không thực sự là một tùy chọn vì bạn không nên sử dụng nó cho cùng một lý do bạn không nên sử dụng các biến toàn cục trong các ngôn ngữ khác. Đó là lời khuyên sẽ được sử dụng một cách tiết kiệm.

Vì tất cả các phạm vi kế thừa từ $rootScope, nếu bạn có một biến $rootScope.datavà ai đó quên datađã được xác định và tạo $scope.datatrong phạm vi cục bộ, bạn sẽ gặp vấn đề.

Nếu bạn muốn sửa đổi giá trị này và duy trì nó trên tất cả các bộ điều khiển của bạn, hãy sử dụng một đối tượng và sửa đổi các thuộc tính ghi nhớ Javascript được chuyển qua "bản sao của một tham chiếu" :

myApp.value('clientId', { value: 'a12345654321x' });
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
    this.change = function(value) {
        clientId.value = 'something else';
    }
}];

Ví dụ về JSFiddle

Ví dụ về AngularJS "biến toàn cục" bằng cách sử dụng $rootScope:

Bộ điều khiển 1 đặt biến toàn cục:

function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

Bộ điều khiển 2 đọc biến toàn cục:

function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

Đây là một jsFiddle hoạt động: http://jsfiddle.net/natefriedman/3XT3F/1/

Quan tâm đến việc thêm một ý tưởng khác vào nhóm wiki, nhưng còn AngularJS ' valuevà constantcác mô-đun thì sao? Tôi chỉ mới bắt đầu sử dụng chúng cho mình, nhưng có vẻ như đây là những lựa chọn tốt nhất ở đây.

Lưu ý: tại thời điểm viết bài, Angular 1.3.7 là bản ổn định mới nhất, tôi tin rằng những thứ này đã được thêm vào 1.2.0, mặc dù chưa xác nhận điều này với thay đổi.

Tùy thuộc vào số lượng bạn cần xác định, bạn có thể muốn tạo một tệp riêng cho họ. Nhưng tôi thường xác định những điều này ngay trước ứng dụng của tôi.config() khối để dễ truy cập. Vì đây vẫn là các mô-đun hiệu quả, bạn sẽ cần dựa vào nội dung phụ thuộc để sử dụng chúng, nhưng chúng được coi là "toàn cầu" cho mô-đun ứng dụng của bạn.

Ví dụ:

angular.module('myApp', [])
  .value('debug', true)
  .constant('ENVIRONMENT', 'development')
  .config({...})

Sau đó, bên trong bất kỳ bộ điều khiển:

angular.module('myApp')
  .controller('MainCtrl', function(debug, ENVIRONMENT), {
    // here you can access `debug` and `ENVIRONMENT` as straight variables
  })

Từ câu hỏi ban đầu thực sự nghe có vẻ như các thuộc tính tĩnh được yêu cầu ở đây, dù là có thể thay đổi (giá trị) hoặc cuối cùng (không đổi). Đó là ý kiến ​​cá nhân của tôi hơn bất cứ điều gì khác, nhưng tôi thấy việc đặt các mục cấu hình thời gian chạy $rootScopetrở nên quá lộn xộn, quá nhanh.

// app.js or break it up into seperate files
// whatever structure is your flavor    
angular.module('myApp', [])    

.constant('CONFIG', {
    'APP_NAME' : 'My Awesome App',
    'APP_VERSION' : '0.0.0',
    'GOOGLE_ANALYTICS_ID' : '',
    'BASE_URL' : '',
    'SYSTEM_LANGUAGE' : ''
})

.controller('GlobalVarController', ['$scope', 'CONFIG', function($scope, CONFIG) {

    // If you wish to show the CONFIG vars in the console:
    console.log(CONFIG);

    // And your CONFIG vars in .constant will be passed to the HTML doc with this:
    $scope.config = CONFIG;
}]);

Trong HTML của bạn:

<span ng-controller="GlobalVarController">{{config.APP_NAME}} | v{{config.APP_VERSION}}</span>

localStorage.username = 'blah'

Nếu bạn được đảm bảo trên một trình duyệt hiện đại. Mặc dù biết tất cả các giá trị của bạn sẽ được chuyển thành chuỗi.

Cũng có lợi ích của việc được lưu trữ giữa các lần tải lại.

Vui lòng sửa lại cho tôi nếu tôi sai, nhưng khi Angular 2.0 được phát hành, tôi không tin $rootScopesẽ có mặt. Phỏng đoán của tôi dựa trên thực tế $scopecũng đang bị loại bỏ. Rõ ràng bộ điều khiển, vẫn sẽ tồn tại, chỉ là không theo ng-controllermốt. Thay vào đó, hãy tiêm bộ điều khiển vào chỉ thị. Khi việc phát hành sắp xảy ra, tốt nhất nên sử dụng các dịch vụ làm biến toàn cục nếu bạn muốn có thời gian dễ dàng hơn để chuyển từ verison 1.X sang 2.0.

Bạn cũng có thể sử dụng biến môi trường $windowđể có thể kiểm tra biến toàn cục bên ngoài bộ điều khiển bên trong$watch

var initWatch = function($scope,$window){
    $scope.$watch(function(scope) { return $window.globalVar },
        function(newValue) {
            $scope.updateDisplayedVar(newValue);
    });
}

Trở nên đáng chú ý, chu trình tiêu hóa dài hơn với các giá trị toàn cầu này, vì vậy nó không phải lúc nào cũng được cập nhật theo thời gian thực. Tôi cần điều tra về thời gian tiêu hóa với cấu hình này.

Tôi chỉ tìm thấy một phương pháp khác do nhầm lẫn:

Những gì tôi đã làm là khai báo một tuyên bố var db = nullứng dụng ở trên và sau đó sửa đổi nó app.jskhi tôi truy cập nó trong đó controller.js tôi có thể truy cập nó mà không gặp vấn đề gì. Có thể có một số vấn đề với phương pháp này mà tôi không biết nhưng đó là Tôi đoán là một giải pháp tốt.

Hãy thử điều này, bạn sẽ không buộc phải tiêm $rootScopetrong bộ điều khiển.

app.run(function($rootScope) {
    $rootScope.Currency = 'USD';
});

Bạn chỉ có thể sử dụng nó trong khối chạy vì khối cấu hình sẽ không cung cấp cho bạn sử dụng dịch vụ của $ rootScope.

Nó thực sự khá dễ dàng. (Nếu bạn đang sử dụng Angular 2+.)

Đơn giản chỉ cần thêm

declare var myGlobalVarName;

Ở đâu đó trong đầu tệp thành phần của bạn (chẳng hạn như sau câu lệnh "nhập") và bạn sẽ có thể truy cập "myGlobalVarName" bất cứ nơi nào trong thành phần của bạn.

Bạn cũng có thể làm một cái gì đó như thế này ..

function MyCtrl1($scope) {
    $rootScope.$root.name = 'anonymous'; 
}

function MyCtrl2($scope) {
    var name = $rootScope.$root.name;
}