AngularJS依赖注入
<html> <head>
<meta charset="utf-8">
<title>AngularJS 依赖注入</title>
</head> <body>
<h2>AngularJS 简单应用</h2> <div ng-app = "mainApp" ng-controller = "CalcController">
<p>输入一个数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>结果: {{result}}</p>
</div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script>
var mainApp = angular.module("mainApp", []); // 使用 provider 创建 service 定义一个方法用于计算两数乘积
/*mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {}; factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});*/ // 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5); // 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
var factory = {}; factory.multiply = function(a, b) {
return a * b;
}
return factory;
}); // 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
}); // CalcService 和 defaultInput 是前面定义的service和默认值
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number); // 按钮 ng-click="square" 绑定
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
}); </script> </body>
</html>
AngularJS依赖注入的更多相关文章
- AngularJS 依赖注入
依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...
- 关于angularjs依赖注入的整理
初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...
- AngularJS开发指南10：AngularJS依赖注入的详解
依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前 ...
- （五）Angularjs - 依赖注入
如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...
- AngularJS - 依赖注入(Dependency Injection)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 依赖注入 依赖注入是软件设计模式中的一部分,用于处理组件是如何得到它说依赖的其它组件的. ...
- angularjs 依赖注入--自己学着实现
在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...
- AngularJS——依赖注入
依赖注入 依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题.关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/art ...
- 个人对于angularjs依赖注入的理解
依赖注入(Dependency Injection,DI),作者认为本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源". 对象或者函数只有以下3种获取 ...
- angularjs 依赖注入原理与实现
在用angular依赖注入时,感觉很好用,他的出现是 为了“削减计算机程序的耦合问题” ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...
随机推荐
- Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- .NET Core 1.1 发布 文档下载资源汇总
.NET Core 1.1 RTM 版2016/11/16 发布.对应发布 ASP.NET Core 1.1 .EF Core 1.1. 你可以通过Visual Studio 2015, Visual ...
- C# - 多线程 之 锁系统
lock 关键字, Monitor 监控器, using System.Threading: // 提供同步访问对象的机制. public static class Monitor { public ...
- 记录一次bug解决过程：velocity中获取url中的参数
一.总结 在Webx的Velocity中获取url中参数:$rundata.getRequest().getParameter('userId') 在Webx项目中,防止CSRF攻击(Cross-si ...
- 隔天开启tomcat spring报错
严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...
- 使用Mavne生成可以执行的jar文件
到目前为之,还没有运行HelloWorld的项目,不要忘了HelloWorld类可是有一个main方法的.使用mvn clean install命令默认生成的jar 包是不能直接运行的.因为带有mai ...
- 使用Ring Buffer构建高性能的文件写入程序
最近常收到SOD框架的朋友报告的SOD的SQL日志功能报错:文件句柄丢失.经过分析得知,这些朋友使用SOD框架开发了访问量比较大的系统,由于忘记关闭SQL日志功能所以出现了很高频率的日志写入操作,从而 ...
- swift 学习笔记
1. 数组中取出字符串的方法: 1)let string = "\arr[0]" 2) let string = String(stringInterpolationSegment ...
- WebViewJavascriptBridge源码探究--看OC和JS交互过程
今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...
- IT菜鸟的生存指南（一）那些人才适合从事IT行业
此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- Just do ...