Comment définir des variables globales dans Angularjs (tutoriel graphique)

Cet article présente principalement les informations pertinentes résumées sur les méthodes de définition de variables globales dans AngularJS. Les amis dans le besoin peuvent se référer à

Trois méthodes de définition de variables globales dans AngularJS

.

Angularjs lui-même a deux méthodes, la méthode de définition des variables globales, plus la méthode de définition des variables globales dans js, il existe trois méthodes au total. La fonction à implémenter est que les variables globales définies dans ng-app peuvent être utilisées dans différents ng-controllers.

1, définissez directement la variable globale via var, ce pur js est le même.

2. Utilisez la valeur angulairejs pour définir les variables globales.

3. Utilisez la constante angulairejs pour définir des variables globales.

Ce qui suit utilise un exemple pour illustrer les trois méthodes ci-dessus :

Exemple :

1 Dans le module d'application, définissez des variables globales

'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. Appelez la variable globale dans le contrôleur

'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. Vérifiez l'effet en html .

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

Résultat : test111, c'est un réservoir de test constant

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Compréhension approfondie de JS sur les fermetures (code joint)

Parcours de boucle de tableau Javascript (détail explication de forEach )

JS plein écran et quitter les détails du plein écran (y compris le code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!