How to set global variables in Angularjs (graphic tutorial)

This article mainly introduces the relevant information summarized on the methods of setting global variables in Angularjs. Friends in need can refer to the following

Three methods of setting global variables in AngularJS

angularjs itself has two methods, the method of setting global variables, and the method of setting global variables in js, there are three methods in total. The function to be implemented is that the global variables defined in ng-app can be used in different ng-controllers.

1. Directly define the global variable through var. This pure js is the same.

2, use angularjs value to set global variables.

3, use angularjs constant to set global variables.

The following uses an example to illustrate the above three methods:

Example:

1. In the app module, define global variables

'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, call the global variable in the controller

'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, check the effect in html

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

Result: test111 this is constanttest tank

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

js in-depth understanding of closures (code attached)

Javascript array loop traversal (detailed explanation of forEach )

JS full screen and exit full screen details (including code)

The above is the detailed content of How to set global variables in Angularjs (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!