<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关于依赖注入的更多相关文章

  1. angular 实现依赖注入

    1:首先获取module对象var myAppModule = angular.module('myApp', []); 2:定义对象(类似spring中xml声明bean对象<bean id= ...

  2. 用原生js简单模仿angular的依赖注入

    大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...

  3. Angular的依赖注入(依赖反转)原理说明

    依赖注入(依赖反转)意思是由函数决定要引入什么样的依赖: let mod = angular.module('test',[]); mod.controller('test_c',function($ ...

  4. Angular 4 依赖注入

    一.依赖注入 1. 创建工程 ng new myangular 2. 创建组件 ng g componet product1 3. 创建服务 ng g service shared/product 如 ...

  5. 【转】简单模拟angular的依赖注入

    原文:http://www.oschina.net/code/snippet_1181081_35136 代码片段 var angular = function(){}; Object.defineP ...

  6. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  7. Angular中依赖注入方式的几种写法

    1.第一种写法 angular.module('App').controller('TestCtrl',['$scope', function($scope) {}]); 2.第二种写法 angula ...

  8. -_-#【Angular】依赖注入

    AngularJS学习笔记 var BoxCtrl = function($scope, $element) { } var str = BoxCtrl.toString().replace(/\s/ ...

  9. Angular依赖注入详解

    Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解 ...

随机推荐

  1. HTML5<footer>元素

    HTML5中<footer>元素是用来描述文档中的底部信息,比如:版本,版权,作者,链接声明,联系信息,时间等等. 实例: <footer> <p>这是一个底部的信 ...

  2. 微信小程序传值取值的几种方法

    一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 < ...

  3. matplot绘图(五)

    b3D图形绘制 # 导包:from mpl_toolkits.mplot3d.axes3d import Axes3Dimport matplotlib.pyplot as plt%matplotli ...

  4. C#_接口基础学习

    参考:https://www.cnblogs.com/hamburger/p/4681681.html

  5. 私有DockerHub搭建

    docker简介 一个开源的应用容器引擎,可以用来打包程序,可以包入依赖环境,这样只需要提供docker image即可,类似于虚拟机,但是更轻量级. 几个概念: Paas,platform as a ...

  6. Mac远程访问Ubuntu

    MacOS和Ubuntu连接到同一个网络使用ping命令可以通信即可.SSH使用SSH可以很方便的在MacOS上访问Ubuntu,不过只能用命令行操作,相当于连接了Ubuntu的终端. 1. Ubun ...

  7. http请求原理

    客户端发送一个HTTP请求到服务器的请求消息包括以下格式:请求行(request line).请求头部(header).空行和请求数据四个部分组成,下图给出了请求报文的一般格式. 请求行 HTTP响应 ...

  8. UVa 579 Clock Hands

    水题.. 求任意时刻时针和分针的夹角,其结果在0°到180°之间. 这里又一次用到了sscanf()函数,确实很方便. 思路:我们分别求出时针和分针转过的角度,然后大的减小的,如果结果ans大于180 ...

  9. luogu2394 yyy loves Chemistry I

    练习 #include <iostream> #include <cstdio> using namespace std; long double a; int main(){ ...

  10. 包含min函数的栈 【微软面试100题 第二题】

    题目要求:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(1). 参考题目:剑指offer第21题. 题目分析: 1. ...