Angularjs 设置全局变量的3种方法
2016-03-30 16:32
507 查看
Angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种。要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用。
1、通过var 直接定义global variable,这根纯js是一样的。
2、用angularjs value来设置全局变量 。
3、用angularjs constant来设置全局变量 。
举一个例子来说明上面3种方法:
1、 在app模块中,定义全局变量
/* 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、 在controller中调用全局变量
/* 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、 在html中看一下效果
<div data-ng-controller="PhoneListCtrl">
{{test.test1}}
{{constanttest}}
{{test2}}
</div>
结果:test111 this is constanttest tank
1、通过var 直接定义global variable,这根纯js是一样的。
2、用angularjs value来设置全局变量 。
3、用angularjs constant来设置全局变量 。
举一个例子来说明上面3种方法:
1、 在app模块中,定义全局变量
/* 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、 在controller中调用全局变量
/* 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、 在html中看一下效果
<div data-ng-controller="PhoneListCtrl">
{{test.test1}}
{{constanttest}}
{{test2}}
</div>
结果:test111 this is constanttest tank
相关文章推荐
- [AngularJS] 1. Angular JS的五大特性
- 【AngularJS】——核心特性之服务
- angular 日期与字符串互转
- angularjs中$q详解
- 关于angularJS绑定数据时自动转义html标签
- angular中 ng-if 指令中的ng-model等指令失效问题
- AngularJS的Provider, Value, Constant, Service, Factory, Decorator的区别与详解
- 由于angular ng-repeat只能写在标签上 循环对象的对象时遇到的问题及解决方法
- AngularJS 前端 MVC 的设计与搭建
- [angularjs] angularjs系列笔记(八)事件
- angular先加载页面再执行事件,特别在动态生成id,然后做echarts等图表
- AngularJS服务总结
- AngularJS浅谈
- AngularJS 动态设置select的默认selected
- ui-router搭建的angularjs模板
- angular常用功能
- ionic(angularjs)select下拉选择第一个选项为空白的解决办法
- Angularjs实现多个页面共享数据的方式
- 七步从AngularJS菜鸟到专家(7):Routing
- 七步从AngularJS菜鸟到专家(6):服务