AngularJS의 전역 변수

컨트롤러의 범위에서 변수를 초기화하는 데 문제가 있습니다. 그런 다음 사용자가 로그인 할 때 다른 컨트롤러에서 변경됩니다.이 변수는 탐색 표시 줄과 같은 항목을 제어하는 ​​데 사용되며 사용자 유형에 따라 사이트 일부에 대한 액세스를 제한하므로 값을 유지하는 것이 중요합니다. 문제는 그것을 초기화하는 컨트롤러가 어떻게 각도에 의해 다시 호출되어 변수를 초기 값으로 다시 설정한다는 것입니다.

나는 이것이 전역 변수를 선언하고 초기화하는 올바른 방법이 아니라고 가정합니다. 실제로 전역 적이 지 않습니다. 제 질문은 올바른 방법은 무엇이며 현재 버전의 각도에서 그 작동에 대한 좋은 예가 무엇입니까?

기본적으로 "전역"변수에 대한 두 가지 옵션이 있습니다.

• http://docs.angularjs.org/api/ng.$rootScope를 사용 $rootScope 하십시오.
• 서비스를 사용 하십시오 http://docs.angularjs.org/guide/services

$rootScope는 모든 범위의 부모이므로 노출 된 값은 모든 템플릿과 컨트롤러에 표시됩니다. $rootScope컨트롤러에 간단히 주입하고이 범위에서 값을 변경할 수 있으므로를 사용하는 것은 매우 쉽습니다. 편리하지만 전역 변수의 모든 문제가 있습니다 .

서비스는 모든 컨트롤러에 주입하고 해당 값을 컨트롤러 범위에 노출 할 수있는 싱글 톤입니다. 싱글 톤 인 서비스는 여전히 '전세계'이지만 서비스가 사용되고 노출되는 위치를 훨씬 잘 제어 할 수 있습니다.

서비스 사용은 좀 더 복잡하지만 그다지 많지는 않습니다.

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

그런 다음 컨트롤러에서 :

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

작동하는 jsFiddle은 다음과 같습니다. http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

공급자 의 Angular 설명서에 따라 값을 저장 하려면 값 레시피를 사용해야합니다.

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

그런 다음 다음과 같은 컨트롤러에서 사용하십시오.

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

제공자, 팩토리 또는 서비스는 "프로 바이더 레시피 위에 구문 설탕"이기 때문에 동일한 것을 얻을 수 있지만 Value를 사용하면 최소한의 구문으로 원하는 것을 얻을 수 있습니다.

다른 옵션은을 사용하는 $rootScope것이지만 다른 언어에서 전역 변수를 사용해서는 안되는 것과 같은 이유로 사용해서는 안되기 때문에 실제로는 옵션이 아닙니다. 있어 좋습니다 아껴서 사용할 수 있습니다.

모든 범위가에서 상속되므로 $rootScope변수가 $rootScope.data있고 누군가 data가 이미 정의 $scope.data되어 있고 로컬 범위에서 생성 된 것을 잊어 버리면 문제가 발생합니다.

이 값을 수정하고 모든 컨트롤러에서 유지하려면 객체를 사용하고 속성을 수정하십시오. Javascript는 "참조의 복사"를 통해 전달됩니다 .

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

JSFiddle 예제

다음을 사용하는 AngularJS "글로벌 변수"의 예 $rootScope:

제어기 1은 전역 변수를 설정합니다.

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

컨트롤러 2는 전역 변수를 읽습니다.

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

작동하는 jsFiddle은 다음과 같습니다. http://jsfiddle.net/natefriedman/3XT3F/1/

위키 풀에 다른 아이디어를 추가하고 싶지만 AngularJS value와 constant모듈은 어떻습니까? 나는 단지 그들 자신을 사용하기 시작했지만, 이것이 아마도 최고의 옵션 인 것처럼 들린다.

참고 : 글을 쓰는 시점에서 Angular 1.3.7은 최신 안정 버전입니다.

몇 개를 정의해야하는지에 따라 별도의 파일을 만들 수 있습니다. 그러나 일반적으로 .config()쉽게 액세스 할 수 있도록 앱 블록 바로 앞에 이것을 정의 합니다. 이것들은 여전히 ​​효과적인 모듈이기 때문에 의존성 주입을 사용하여 사용해야하지만 앱 모듈에 대한 "전역"으로 간주됩니다.

예를 들면 다음과 같습니다.

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

그런 다음 컨트롤러 내부에서

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

초기 질문에서 실제로 정적 속성이 변경 가능한 값 (값) 또는 최종 (일정한)과 같이 필요한 것처럼 들립니다. 그것은 다른 어떤 것보다 개인적인 견해이지만, 런타임 구성 항목을 $rootScope너무 복잡하고 너무 빨리 배치하는 것을 발견했습니다 .

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

HTML에서 :

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

localStorage.username = 'blah'

최신 브라우저를 사용하는 것이 보장됩니다. 당신의 가치는 모두 문자열로 바뀔 것입니다 알고 있지만.

또한 재로드간에 캐시되는 편리한 이점이 있습니다.

내가 틀렸다면 나를 수정하십시오. 그러나 Angular 2.0이 출시 될 때 나는 $rootScope주변에있을 것이라고 믿지 않습니다 . 내 추측은 $scope제거되고 있다는 사실에 근거 하고 있습니다. 분명히 컨트롤러는 ng-controller유행이 아닌 여전히 존재합니다 . 대신 컨트롤러를 지시문에 주입하는 것을 고려하십시오. 릴리스가 임박 했으므로 verison 1.X에서 2.0으로보다 쉽게 ​​전환하려면 서비스를 전역 변수로 사용하는 것이 가장 좋습니다.

환경 변수를 사용하여 $window컨트롤러 외부의 전역 변수 선언을 내부에서 확인할 수 있습니다.$watch

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

주의해서, 다이제스트주기는 이러한 전역 값으로 길어 지므로 항상 실시간으로 업데이트되는 것은 아닙니다. 이 구성으로 다이제스트 시간을 조사해야합니다.

실수로 다른 방법을 찾았습니다.

내가 한 것은 var db = null위의 앱 선언을 선언하고 그때에 수정 app.js했을 때 controller.js 문제없이 액세스 할 수있었습니다.이 방법에는 알지 못하지만 몇 가지 문제가있을 수 있습니다. 좋은 해결책이라고 생각합니다.

이것을 시도하면 $rootScope컨트롤러에 강제로 주입하지 않습니다 .

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

구성 블록은 $ rootScope의 서비스를 제공하지 않으므로 실행 블록에서만 사용할 수 있습니다.

실제로는 매우 쉽습니다. (어쨌든 Angular 2 이상을 사용하는 경우)

간단히 추가

declare var myGlobalVarName;

구성 요소 파일 상단 (예 : "import"문 다음)에 있으면 구성 요소 내부의 "myGlobalVarName"에 액세스 할 수 있습니다.

당신은 또한 이런 일을 할 수 있습니다 ..

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

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