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有必要先理解 ...
随机推荐
- 利用ss5服务搭建代理服务器
利用ss5服务搭建代理服务器 1. 下载ss5-3.8.9-8.tar.gz ###官网下载http://ss5.sourceforge.net/ 2. 安装ss5 yum -y install gc ...
- 深入理解ES6箭头函数的this以及各类this面试题总结
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿 它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this 一针见血式总结: 普通函数中的 ...
- 【哈希 二分】bzoj2084: [Poi2010]Antisymmetry
可以用manacher或者SA搞过去的:非常有趣的hash题 Description 对于一个01字符串,如果将这个字符串0和1取反后,再将整个串反过来和原串一样,就称作“反对称”字符串.比如0000 ...
- Python学习笔记：re模块（正则表达式）
本文是部分内容参考自:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html,虽然这篇博客是基于Python2.4的老版本,但是基础的P ...
- iOS 中的视图函数 init initwithnib viewDidLoad viewWillAppear的总结
我要总结的函数主要是这几个: UIView *view-如果view还没有被初始化的话,getter方法会先调用[self loadView],如果getter或者setter方法被重写了,子类中的g ...
- hdu 3836 tarjain 求强连通分量个数
// 给你一个有向图,问你最少加几条边能使得该图强连通 #include <iostream> #include <cstdio> #include <cstring&g ...
- 原生Ajax+springBoot实现用户登录
思路:用户输入登录信息——信息传到后台——数据库查询——比较查询结果——返回登录信息(成功/失败) html页面代码: <!DOCTYPE html> <html lang=&quo ...
- Android兼容性测试CTS Verifier-环境搭建、测试执行、结果分析
CTS Verifier算是CTS的一部分,需要手动进行,主要用于测试那些自动测试系统无法测试的功能,比如相机.传感器等.由于硬件配置或其他原因,不同手机上部分测试项目被隐藏,也就是说CTS Veri ...
- 有限状态机（FSM）的设计与实现
有限状态机(FSM)是表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.通常FSM包含几个要素:状态的管理.状态的监控.状态的触发.状态触发后引发的动作.本文主要 ...
- BZOJ 2465: [中山市选2009]小球
难度在于读题 #include<cstdio> #include<algorithm> using namespace std; int a[1000005]; struct ...