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有必要先理解 ...
随机推荐
- iOS应用架构谈part4-本地持久化方案及动态部署
前言 嗯,你们要的大招.跟着这篇文章一起也发布了CTPersistance和CTJSBridge这两个库,希望大家在实际使用的时候如果遇到问题,就给我提issue或者PR或者评论区.每一个issue和 ...
- UICollectionView实现无限轮播
#import "KGNewsController.h"#import "KGNewsCell.h"#import "KGNews.h"#i ...
- Android深度探索总结
Android深度探索前四章总结 通过这几章的学习真实体会到“移植”的概念:为特定设备定制Android的过程,但是移植的过程中开发最多的就是支持各种硬件设备的Linux驱动程序,本章对Android ...
- 【数学 技巧】divisor
没考虑重复lcm处理被卡TLE没A真是可惜 题目大意 $n$为$k-可表达的$当且仅当数$n$能被表示成$n$的$k$个因子之和,其中$k$个因子允许相等. 求$[A,B]$之间$k-可表达$的数的个 ...
- 12Vim在系统配置中的应用示例
Vim 在系统配置中的应用示例 1. 配置主机名称 为了便于咱局域网中查找某台特定的主机,后者对主机进行区分,除了要有IP地址外,还要为主机配置一个主机名,主机名之间可以通过这个类似于域名的名称来相互 ...
- 忘记root密码怎么办-单用户模式修改root密码
忘记root密码怎么办-单用户模式修改root密码================================= 1,开机3秒内按下向下的方向键,目的是为了不让它进入系统,而是停留在开机界面. 2 ...
- 让Web站点崩溃最常见的七大原因
转载自: https://blog.csdn.net/u012981511/article/details/53503242 1. 磁盘已满 导致系统无法正常运行的最可能的原因是磁盘已满.一个好的网络 ...
- React 基础知识总结
data-id="1190000016885142" data-license=""> 一.Node.js Node.js并不是一个JavaScript框 ...
- 代理工具--fiddle
正则匹配 1)前缀为“EXACT:”表示完全匹配:只有match=rules时,才匹配 2)无前缀表示基本搜索,表示搜索到字符串就匹配:只要match中包含了rules的字符串,即可 3)前缀为“NO ...
- 记一次header跨域与cookie共享
最近把左边的传统模式,换成了右边通过js直接调api拿数据并渲染,于是变出现了ajax的跨域问题:XMLHttpRequest cannot load http://api.abc.com/?s ...