Angularjs에서 전역 변수를 설정하는 방법(그래픽 튜토리얼)

이 글은 Angularjs에서 전역 변수를 설정하는 방법에 대한 관련 정보를 중심으로 소개하고 있으니 필요하신 분들은 참고하시면 됩니다.

AngularJS에서 전역 변수를 설정하는 세 가지 방법

angularjs 자체에는 전역 변수를 설정하는 방법이 두 가지가 있습니다. 전역 변수를 설정하는 js 방법 외에 총 3가지 방법이 있습니다. 구현하려는 기능은 ng-app에 정의된 전역 변수를 다른 ng-controller에서 사용할 수 있다는 것입니다.

1. var를 통해 직접 전역 변수를 정의합니다. 이 순수 js도 마찬가지입니다.

2, anglejs 값을 사용하여 전역 변수를 설정하세요.

3, anglejs 상수를 사용하여 전역 변수를 설정하세요.

다음은 예제를 사용하여 위의 세 가지 방법을 설명합니다.

예:

1 앱 모듈에서 전역 변수를 정의합니다

'use strict';

/* App Module */

var test2 = 'tank';     //方法1，定义全局变量

var phonecatApp = angular.module('phonecatApp', [   //定义一个ng-app
 'ngRoute',
 'phonecatControllers',
 'tanktest'
]);

phonecatApp.value('test',{"test":"test222","test1":"test111"}); //方法2定义全局变量

phonecatApp.constant('constanttest', 'this is constanttest');  //方法3定义全局变量

phonecatApp.config(['$routeProvider',        //设置路由
 function($routeProvider) {
  $routeProvider.
   when('/phones', {
    templateUrl: 'partials/phone-list.html'   //这里没有设置controller，可以在模块中加上ng-controller
   }).
   when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
   }).
   when('/login', {
    templateUrl: 'partials/login.html',
    controller: 'loginctrl'
   }).
   otherwise({
    redirectTo: '/login'
   });
 }]);

2. 컨트롤러에서 전역 변수를 호출합니다

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope','test','constanttest',
 function($scope,test,constanttest) {
  $scope.test = test;          //方法2，将全局变量赋值给$scope.test
  $scope.constanttest = constanttest;  //方法3，赋值
  $scope.test2 = test2;         //方法1，赋值
 }]);

3. html에서 효과를 살펴보세요

<p data-ng-controller="PhoneListCtrl">
  {{test.test1}}
  {{constanttest}}
  {{test2}}
</p>

결과: test111 이것은 Constanttest 탱크입니다

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

js 클로저에 대한 심층적인 이해(코드 포함)

Javascript 배열 루프 탐색(forEach 자세한 설명)

JS 전체 화면 및 전체 화면 종료 자세한 설명(코드 포함) )

위 내용은 Angularjs에서 전역 변수를 설정하는 방법(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!