AngularJS 定义全局变量的三种实现方式
本文总结了在 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 等其他机制来实现全局变量的功能。
感谢阅读,希望本文内容能对大家有所帮助,感谢各位对本站的支持!
定制 Quill.js 主题样式:修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试?控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版:API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09
