So legen Sie globale Variablen in Angularjs fest (grafisches Tutorial)

In diesem Artikel werden hauptsächlich die relevanten Informationen zu den Methoden zum Festlegen globaler Variablen in AngularJS zusammengefasst. Freunde in Not können sich auf

Drei Methoden zum Festlegen globaler Variablen in AngularJS beziehen

Angularjs selbst verfügt über zwei Methoden: die Methode zum Festlegen globaler Variablen und die Methode zum Festlegen globaler Variablen in js. Insgesamt gibt es drei Methoden. Die zu implementierende Funktion besteht darin, dass die in ng-app definierten globalen Variablen in verschiedenen ng-Controllern verwendet werden können.

1, definieren Sie die globale Variable direkt über var, dieses reine JS ist dasselbe.

2. Verwenden Sie den AngularJS-Wert, um globale Variablen festzulegen.

3. Verwenden Sie die AngularJS-Konstante, um globale Variablen festzulegen.

Im Folgenden werden die oben genannten drei Methoden anhand eines Beispiels veranschaulicht:

Beispiel:

1. Definieren Sie im App-Modul globale Variablen

'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, rufen Sie die globale Variable

'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 im Controller auf und sehen Sie sich den Effekt in HTML an

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

Ergebnis: test111 das ist konstanttest tank

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JS vertieftes Verständnis von Abschlüssen (Code im Anhang)

Javascript-Array-Loop-Traversal (detailliert). Erklärung von forEach )

JS-Vollbild- und Exit-Vollbilddetails (einschließlich Code)

Das obige ist der detaillierte Inhalt vonSo legen Sie globale Variablen in Angularjs fest (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!