AngularJS之依赖注入（实例一）

最新推荐文章于 2019-05-13 14:49:53 发布
最新推荐文章于 2019-05-13 14:49:53 发布
阅读量137 收藏
点赞数
文章标签： javascript ViewUI

1、问题背景

AngularJS特有的一个依赖注入，当在一个对象创建时，需要依赖另一个对象。


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之依赖注入（实例一）</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<style>
			body,html{
				font-family: "微软雅黑";
				font-size: 12px;
				font-feature-settings: on;
			}
			.showContent{
				width: 200px;
				padding: 10px;
				margin: 10px;
				border: 1px dashed #2AABD2;
			}
		</style>
		<script>
			var app = angular.module("reApp",[]);
			app.config(function($controllerProvider){
				$controllerProvider.register("reCon",["$scope",function($scope){
					$scope.content = "";
					$scope.clickShow = function(){
						$scope.content = "showContent";
						$scope.showContent = "依赖注入";
					};
				}]);
			});
		</script>
	</head>
	<body ng-app="reApp">
		<div ng-controller="reCon">
			<button type="button" ng-click="clickShow();">依赖注入</button><br><br>
			<label class="{{content}}">{{showContent}}</label>
		</div>
	</body>
</html>

3、实现结果

（1）初始化


（2）点击按钮时


iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angularjs中的依赖注入
IT修真院：初学者转行到互联网的聚集地
05-28 1366
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【 angularjs中的依赖注入】 1.背景介绍 今天给大家讲的是angular的依赖注入，首先，我们要介绍一下什么是依赖注入 依赖注入，我们打个比喻，以前原始社会，我们需要斧子，然后由于还没有社会...
AngularJs - 依赖注入
wust_cyl的博客
08-16 780
依赖注入，是一种软件设计模式，应DIP依赖倒置原则，描述组件之间高层组件不应该依赖于底层组件。依赖注入简化了Angular解析模块/组件之间依赖的过程。在AngularJS中，依赖注入无孔不入。 依赖注入贯穿于Angular， 可以在定义组件例如directive，factory，filter，provider，controller，或给模提供 run 和config 代码块时候使用它。 三种...
理解AngularJS中的依赖注入
学如逆水行舟，不进则退
10-30 931
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用，它同时也是我们能够轻松对组件进行测试的关键所在。在本文中我们将会解释AngularJS依赖注入系统是如何运行的。 Provider服务（$provide） $provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务(service)。服务会被叫做provider的东西来定义，你可以使
AngularJS中的依赖注入
weixin_34061042的博客
02-10 212
依赖注入 | Dependency Injection原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源".Dependency Injection (DI,依赖注入)是一种软件设计模式,用于处理如何让程序获得其依赖(对象的)引用。关于 DI 的深入讨...
AngularJS 依赖注入
chihui8701的博客
03-14 90
什么是依赖注入 wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。 该模式分离了客户端依赖本身行为的创建...
AngularJS的依赖注入实例分析(使用module和injector)
10-20
在AngularJS中，依赖注入（Dependency Injection，简称DI）是一种设计模式，用于简化代码并提高可测试性。它允许开发者声明他们所需的依赖，而无需直接创建这些依赖的实例。AngularJS通过内置的机制自动处理这些依赖...
AngularJS 依赖注入详解和简单实例
10-21
本文主要介绍AngularJS 依赖注入,这里对依赖注入做了详细介绍讲解,并提供效果图和示例代码以便学习参考
AngularJS之依赖注入模拟实现
01-19
AngularJS有一经典之处就是依赖注入，对于什么是依赖注入，熟悉spring的同学应该都非常了解了，但，对于前端而言，还是比较新颖的。  依赖注入，简而言之，就是解除硬编码，达到解偶的目的。  下面，我们看看...
AngularJS学习笔记之依赖注入详解
10-22
依赖注入是AngularJS框架的核心特性之一，它使得代码更加模块化、可测试和易于维护。在AngularJS中，依赖注入（Dependency Injection，简称DI）主要通过`$injector`服务来实现，它负责管理和实例化应用程序中的各个...
AngularJS依赖注入示例
xyphf的博客
11-15 1163
需求解释 在页面的视图模中，添加4个文本不同的按钮，通过依赖注入的方式，向控制器注入多个依赖对象，当单击按钮时，根据选择的对象不同，将在页面的< div >元素中将显示不同的问候内容。先贴代码在解释<!doctype html> <html ng-app="a4_2"> <head> <title>简单依赖注入的示例</title> <script src="../Script/a
angularjs依赖注入
chengzhang_jian的博客
10-10 403
将代码部署到线上，都会对代码做压缩。压缩会删除所有的注释、删除没有语义的空白字符、尽可能的简化变量的名称（混淆），但是数字、字符串、关键字是不会改变的。angularjs依赖注入有3种分别是标记式依赖注入和行内式依赖注入和推断式（猜测）。官方推荐行内式依赖注入 如下例采用行内式依赖注入 html<!DOCTYPE html> <html ng-app="myApp"> <head lang="e
angularJS中的依赖注入
IT修真院：初学者转行到互联网的聚集地
05-13 575
这里是修真院web小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能，本篇分享的是： 【 angularJS中的依赖注入】 1.背景介绍 以前原始社会，我们需要斧子，然而由于还没有社会分工，只能自己打磨一把使用，对应在程序上是我们需要一个功能的时候只能自己创建，然后使用n...
Angular-依赖注入
ioniconline的博客
12-25 2984
原文：https://code.angularjs.org/1.5.0-rc.0/docs/guide/di 依赖注入(DI)是软件设计模式，用来处理组件怎样掌控它们的依赖关系。  Angular注入子系统负责创建组件，解决它们的依赖关系，并把它们提供给其它需要的组件。 1）、使用依赖注入 依赖注入贯穿于Angular，可以在定义组件或给模提供 run 和confi
angularJs三种依赖注入方式与minify
Beyond The Sky
06-15 2645
依赖注入（饭来伸手，一来张口）DI，Dependency Injectio AngularJs使用module“名字／对象”注册表来作为容器，实现DI。 依赖注解有三种方式，（数组标注、添加$inject属性、隐式声明）。 其中前两种在代码minify时不会被破坏，推荐使用第一种方式。 第二种方式可以自己手动改写（下面有例子），也可以使用工具ngAnnotate对隐式声明进
AngularJS 4(六)【依赖注入】
极客神殿
08-24 395
依赖注入 依赖注入是重要的程序设计模式。 Angular 有自己的依赖注入框架，离开了它，几乎没法构建 Angular 应用。 它使用得非常广泛，以至于几乎每个人都会把它简称为 DI。 从服务开始来了解依赖注入 创建字典服务 – ./src/app/service/dictionary.service.ts export class DictionayService { l...
Angularjs之依赖注入
weixin_34006965的博客
03-23 118
一个对象通常有三种方式可以获得对其依赖的控制权： 在内部创建依赖； 通过全局变量进行引用； 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的。比如： function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { ...
Angularjs依赖注入
自我修炼之路
02-28 168
依赖注入是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传寄）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。Angularjs提供5个核心组件来作为依赖注入：1.value 2.factory 3.service 4.provider 5.constant一、value是一个简单的JavaScript对象，用于向控制器传寄值（配置阶段）：// 定义...
AngularJS中的依赖注入是什么？
weixin_33961829的博客
12-15 615
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【AngularJS中的依赖注入是什么？】 大家好，我是IT修真院深圳分院第12期的学员韩鹏，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网J...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值