AngularJS 定义全局变量的三种实现方式

作者:百宝袋时间:2026-10-30 15:31:06浏览:535

本文总结了在 AngularJS 应用中设置全局变量的三种主要方法:利用原生 JavaScript 的 var 定义、使用 angular.value 以及使用 angular.constant。文章通过具体的代码示例,展示了如何在模块中定义这些变量,并在控制器和 HTML 视图中正确调用与显示,帮助开发者根据需求选择合适的全局状态管理方案。

AngularJS 全局变量定义方法概述

AngularJS 中设置全局变量主要有三种实现途径。

AngularJS 框架本身提供了两种设置全局变量的机制,若结合原生 JavaScript 的设置方式,共计有三种方案。这些方法的核心目标是确保在 ng-app 作用域内定义的全局变量,能够在不同的 ng-controller 控制器中共享和访问。

第一种方法是通过 var 关键字直接定义全局变量,其实现逻辑与纯 JavaScript 代码完全一致。

第二种方法是利用 AngularJS 提供的 value 服务来注册全局变量。

第三种方法是使用 AngularJS 提供的 constant 服务来注册全局常量。

下文将通过一个完整的实例,依次演示上述三种方法的具体应用。

具体实例如下:

模块中全局变量的定义与调用示例

第一步,在应用模块中定义全局变量。


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

第二步,在控制器中调用并处理这些全局变量。


'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,赋值
 }]);

第三步,在 HTML 视图中展示最终效果。


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

运行结果输出为:test111 this is constanttest tank。

其他实现方式补充

此外,开发者还可以借助 AngularJS 的 factory 等其他机制来实现全局变量的功能。

感谢阅读,希望本文内容能对大家有所帮助,感谢各位对本站的支持!

作者最新文章