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有必要先理解 ...
随机推荐
- 为什么方差的分母有时是n，有时是n-1 源于总体方差和样本方差的不同
为什么样本方差(sample variance)的分母是 n-1? 样本方差计算公式里分母为n-1的目的是为了让方差的估计是无偏的.无偏的估计(unbiased estimator)比有偏估计(bia ...
- HDU-1072-Nightmares
这题可以用dfs写,我们记忆化搜索. 我们定义一个step和time数组,分别表示走到这点的最小步数,time表示走到该点炸弹还剩多少时间. 递归边界一是,如果走到该点,时间等于0,我们就返回. 如果 ...
- unbuntu14下Qt4.8 和MySQL连接问题 QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE
使用 QSqlDatabase::addDatabase创建数据库时 会报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: availab ...
- 如何用 CSS 和 D3 创作一个无尽的六边形空间
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/NBvrWL 可交互视频 此视频是可 ...
- Python基础——文件操作
写文件 writefile %%writefile ./data/testFile.txt hello python jin tian tian qi bu cuo open覆盖 txt=open(' ...
- poj-2533 longest ordered subsequence（动态规划）
Time limit2000 ms Memory limit65536 kB A numeric sequence of ai is ordered if a1 < a2 < ... &l ...
- net clr via c sharp chap1-- note
Tag-> 托管代码 Tag-> .NET Framework 系统环境检测 Tag-> 设置平台 Tag-> 查询64或32位机 Tag-> IL编译成机器指令 Tag ...
- JAVA-基础(六) Java.serialization 序列化
序 列 化 序列化(serialization)是把一个对象的状态写入一个字节流的过程. Serializable接口 只有一个实现Serializable接口的对象可以被序列化工具存储和恢复.Ser ...
- Linux的档案权限与目录配置
重点回顾:1.Linux的每个档案中,依据权限分为使用者.群组与其他人三种身份 2.群组最有用的功能之一,就是当你在团队开发资源的时候,且每个账号都可以有多个群组的支持 3.利用"ls -l ...
- 27、android log日志
一.记住 加写sd卡权限 二.代码 package com.example.logtest; import java.io.File; import java.io.IOException; impo ...