angular关于依赖注入
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></button>
<p>Result: {{result}}</p>
<p>Result: {{result}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
}); mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
}); mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
</html>
<p>Enter a number: <input type="number" ng-model="number" />
构造一个input，使用ng-model进行数据绑定。
<p>Result: {{result}}</p>
此处输出结果。
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
定义一个工厂，工厂名称为MathService。工厂中定义对象factory，并定义方法multiply。
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
定义一个服务，名称为CalcService，并且引用工厂中的方法。
mainApp.controller('CalcController', function($scope, CalcService) {
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
定义一个控制器controller，引入$scope和CalcService服务，使用绑定的数据进行数据计算。
至此，一个完整的依赖注入完结。
angular关于依赖注入的更多相关文章
- angular 实现依赖注入
1:首先获取module对象var myAppModule = angular.module('myApp', []); 2:定义对象(类似spring中xml声明bean对象<bean id= ...
- 用原生js简单模仿angular的依赖注入
大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...
- Angular的依赖注入（依赖反转）原理说明
依赖注入(依赖反转)意思是由函数决定要引入什么样的依赖: let mod = angular.module('test',[]); mod.controller('test_c',function($ ...
- Angular 4 依赖注入
一.依赖注入 1. 创建工程 ng new myangular 2. 创建组件 ng g componet product1 3. 创建服务 ng g service shared/product 如 ...
- 【转】简单模拟angular的依赖注入
原文:http://www.oschina.net/code/snippet_1181081_35136 代码片段 var angular = function(){}; Object.defineP ...
- angular 基本依赖注入
import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...
- Angular中依赖注入方式的几种写法
1.第一种写法 angular.module('App').controller('TestCtrl',['$scope', function($scope) {}]); 2.第二种写法 angula ...
- -_-#【Angular】依赖注入
AngularJS学习笔记 var BoxCtrl = function($scope, $element) { } var str = BoxCtrl.toString().replace(/\s/ ...
- Angular依赖注入详解
Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...
随机推荐
- Yum简单使用小结
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动 ...
- 【线段树分治 线性基】luoguP3733 [HAOI2017]八纵八横
不知道为什么bzoj没有HAOI2017 题目描述 Anihc国有n个城市,这n个城市从1~n编号,1号城市为首都.城市间初始时有m条高速公路,每条高速公路都有一个非负整数的经济影响因子,每条高速公路 ...
- redis学习笔记(1)
最近在学习redis,做了比较详细的学习笔记,分享给大家,欢迎一起讨论和学习 第一部分,简单介绍redis 和 redis的基本操作 NoSQL的特点 : 数据库种类繁多,但是一个共同的特点都是去掉关 ...
- linux SVN安装及配置教程
1.环境centos6.4 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /www/svndata svnserve -d -r /www/sv ...
- 并查集：CDOJ1594-老司机的奇幻漂流 (食物链)
老司机的奇幻漂流 UESTC - 1594 Problem Description 老司机在救出了女票之后,就和她在全世界旅游,有一天,他们来到了一个神奇的小岛上. 这个小岛上有三种动物,他们互相克制 ...
- Linux下查看USB设备信息
首先需要将usbfs挂载一下,然后才能查看.$ mount -t usbfs none /proc/bus/usb$ cat /proc/bus/usb/devices或者在文件(/etc/fsta ...
- 开源OA系统启动:基础数据,工作流设计
原文:http://www.cnblogs.com/kwklover/archive/2007/01/13/bpoweroa_03_baseandworkflowdesign.html自从开源OA系统 ...
- HDU 5236 Article 期望
题意: 你现在要打\(n\)个字符,但是程序随时可能会崩溃. 你可以在恰当的时机按下 \(Ctrl-S\)键,崩溃后,会从最后一次保存的情况继续开始打字. 具体是这样的: 在每个第\(i-0.1s(i ...
- Python虚拟机函数机制之名字空间（二）
函数执行时的名字空间 在Python虚拟机函数机制之无参调用(一)这一章中,我们对Python中的函数调用机制有个大概的了解,在此基础上,我们再来看一些细节上的问题.在执行MAKE_FUNCTION指 ...
- configurationChanges
在Android中每次屏幕的切换动会重启Activity,所以应该在Activity销毁前保存当前活动的状态,在Activity再次Create的时候载入配置.在activity加上android:c ...