angularjs 设置全局变量的3种方法

简介:

AngularJS自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种。要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用。

1,通过var 直接定义global variable,这根纯js是一样的。

2,用angularjs value来设置全局变量 。

3,用angularjs constant来设置全局变量 。

下面用一个例子,来说明,上面3种方法:

Java代码   收藏代码
  1. 'use strict';  
  2. /* App Module */  
  3. var test2 = 'tank';         //方法1,定义全局变量  
  4.   
  5. var phonecatApp = angular.module('phonecatApp', []);  
  6.   
  7. phonecatApp.value('test',{"test":"test222","test1":"test111"});  //方法2定义全局变量  
  8.   
  9. phonecatApp.constant('constanttest''this is constanttest');    //方法3定义全局变量  

 2,在controller中调用全局变量

Java代码   收藏代码
  1. 'use strict';  
  2.   
  3. /* Controllers */  
  4.   
  5. var phonecatControllers = angular.module('phonecatControllers', []);  
  6.   
  7. phonecatControllers.controller('PhoneListCtrl', ['$scope','test','constanttest',  
  8.   function($scope,test,constanttest) {  
  9.     $scope.test = test;                   //方法2,将全局变量赋值给$scope.test  
  10.     $scope.constanttest = constanttest;   //方法3,赋值  
  11.     $scope.test2 = test2;                 //方法1,赋值  
  12.   }]);  

 value只能注入controller,factory,service等 constant可以注入任何方法

value vs. constant

$provide.value('pageCount', 7);
$provide.constant('pageCount', 7);

区别一:value可以被修改,constant一旦声明无法被修改

Java代码   收藏代码
  1. $provide.decorator('pageCount', function($delegate) {  
  2.     return $delegate + 1;  
  3. });  

 decorator可以用来修改(修饰)已定义的provider们,除了constant

区别二:value不可在config里注入,constant可以

Java代码   收藏代码
  1. myApp.config(function(pageCount){  
  2.     //可以得到constant定义的'pageCount'  
  3. });  

 关于config,之后会专门介绍

 

全局方法

Java代码   收藏代码
  1. var TestCtrl = function $scope,facetorytest,servicetest) {    
  2.     $scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();    
  3.     $scope.servicetest = servicetest.firstname+" "+servicetest.lastname();    
  4. }   
  5.   
  6. var searchAndShow = function($scope, $routeParams, $location) {  
  7.   show($scope, $routeParams);  
  8.   $scope.search = function(){  
  9.     $location.search($scope.searchData).replace();  
  10.   }  
  11. }  

 啥地方萨芬

相关文章
|
JavaScript 前端开发
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发
AngularJs-变量
Angularjs-变量 名字 : Hello {{name}} ...
760 0