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源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...
随机推荐
- 简述9种社交概念 SNS究竟用来干嘛？
1.QQ 必备型交流工具基本上每一个网民最少有一个QQ,QQ已经成为网民的标配,网络生活中已经离不开QQ了.虽然大家嘴上一直在骂 QQ这个不好,那个不对,但是很少有人能彻底离开QQ.QQ属于IM软件, ...
- JavaWeb_day07_JSP
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day07 JSP 全称 :Java Server P ...
- 使用SSH上传安装eclipse
安装eclipse 步骤: 1.上传eclipse tar文件 2.[root@localhost soft]# tar -zxvf eclipse-jee-galileo-SR2-linux-gtk ...
- 一些简单的C语言算法
1. 要求输入一个正整数,打印下述图形 输入:5 输出: * ** *** **** ***** 实现代码如下: #include <stdio.h> int main(int argc, ...
- 异常:java.lang.LinkageError: loader constraint violation: when resolving interface method
异常:java.lang.LinkageError: loader constraint violation: when resolving interface method "javax. ...
- HTTP协议下保证密码不被获取更健壮方式
说到在http协议下用户登录如何保证密码安全这个问题: 小白可能第一想法就是,用户在登录页面输入密码进行登录时,前台页面对用户输入的密码进行加密,然后把加密后的密码作为http请求参数通过网络发 ...
- 深化管理、提升IT的数据平台建设方案
谈到信息化,每个企业有每个企业的业务模式,每个企业有每个企业不同的思考.落地有效的信息化建设一定紧跟着企业的发展,围绕业务和管理,来提升效率,创造价值. 对于企业如何在发展的不同阶段提升信息化建设,这 ...
- Java实现约瑟夫环
什么是约瑟夫环呢? 约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个 ...
- ClassNotFoundException超限
错误日志图 被这弱智的错误吭了半个小时,项目本来好好的,然后因为改版加了很多东西,所以就超限了,一开始总是报下面那图的错,搞的我总以为是retrofit的错,但是好好的框架而且没改过,怎么可能会出错呢 ...
- Windows 批处理设置dns ，解决能上qq不能开网页
对于windows 7 @echo off netsh interface ip set dns "本地连接" static 114.114.114.114 primary net ...