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. }  

 啥地方萨芬

相关文章
|
存储 关系型数据库 MySQL
最全MySQL面试60题(含答案):存储引擎+数据库锁+索引+SQL优化等
最全MySQL面试60题(含答案):存储引擎+数据库锁+索引+SQL优化等
1976 0
|
存储 JavaScript 前端开发
受控组件与非受控组件
【8月更文挑战第24天】
126 0
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
2436 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
存储 Cloud Native 关系型数据库
云原生数据仓库使用问题之如何将一行数据转换为多行数据
阿里云AnalyticDB提供了全面的数据导入、查询分析、数据管理、运维监控等功能,并通过扩展功能支持与AI平台集成、跨地域复制与联邦查询等高级应用场景,为企业构建实时、高效、可扩展的数据仓库解决方案。以下是对AnalyticDB产品使用合集的概述,包括数据导入、查询分析、数据管理、运维监控、扩展功能等方面。
|
存储 安全 算法
密码学原理及其在网络安全中的应用
【7月更文挑战第27天】密码学作为保护信息安全的基石,在网络安全中发挥着不可或缺的作用。通过加密、解密、身份验证、数字签名和哈希函数等技术手段,密码学确保了数据的机密性、完整性和认证性。随着计算能力的不断提升和密码分析技术的不断进步,密码学需要不断创新和发展,以应对新的安全挑战。未来,随着量子计算技术的兴起和后量子密码学的研究深入,密码学将在网络安全领域发挥更加重要的作用。
|
测试技术 开发者 Python
FastAPI实战:如何用Python打造高性能Web应用,让你的项目一鸣惊人?
【8月更文挑战第31天】本文介绍了高性能Python Web框架FastAPI,带领读者探索其核心概念如路由、模板及请求对象,并通过示例展示了模型定义与依赖注入的运用。FastAPI凭借简洁的语法、快速的开发效率及轻量级特性,成为构建现代Web应用的理想选择。文中还分享了使用FastAPI时的最佳实践,如利用异步功能提升性能、编写测试确保代码质量以及采用社区扩展满足特定需求,助力开发者高效开发高性能Web应用。
759 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue的电影评论网站系统的设计与实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的电影评论网站系统的设计与实现(源码+lw+部署文档+讲解等)
215 0
|
存储 自然语言处理 算法
向量数据库Chroma极简教程
本文重点围绕向量数据库Chroma的使用和实战,主要包括以下内容: * Chroma设计理念 * Chroma常见概念(数据集,文档,存储,查询,条件过滤) * Chroma快速上手 * Chroma支持的Embeddings算法 * 实战:在Langchain中使用Chroma对中国古典四大名著进行相似性查询
2378 2
|
机器学习/深度学习 数据采集 数据挖掘
【python进阶】你还在使用for循环新建数组?生成器表达式帮你一行解决
在本文中,介绍了生成器与表达式的用法,帮助我们快速创建数组以及其他序列,解锁了python序列的新姿势。在后续的更新中,我将继续对元组的高级姿势和玩法进行介绍。
14785 2
【python进阶】你还在使用for循环新建数组?生成器表达式帮你一行解决
从 Angular 中的 URL 获取查询参数
本文介绍了如何从 Angular 中的 URL 获取查询参数。 通过注入ActivatedRoute的实例,可以订阅各种可观察对象,包括queryParams和params observable。以下是范例: import { ActivatedRoute } from '@angular/rou...
1694 0

热门文章

最新文章