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有必要先理解 ...
随机推荐
- mysql group by的特殊性
SELECT create_year, userno , sum(sal) FROM user GROUP BY userno 以上语句,在oracle 或sql server肯定是语法错误 因为g ...
- webgis技术在智慧城市综合治理网格化社会管理平台（综治平台）的应用
网格化社会管理平台功能:1 实有人口管理人口数据管理按照人口分类进行管理,分为常住人口.流动人口.特殊人群.弱势群体,功能包括人口信息管理.归口负责.人房关联.统计汇总.地图监管服务等功能.人口信 ...
- virtualvenv+django+uWSGI+nginx 部署
原创博文 转载请注明出处! 1. virtualvenv 2. django 3. uWSGI 4. nginx 5. 踩坑记录 1. virtualvenv virtualvenv install ...
- JS数据结构与算法--单向链表
链表结构:链表中每个元素由一个存储元素本身的节点和一个指向下一元素的引用组成.如下所示(手画的,比较丑,懒得用工具画了,嘻嘻) 1.append方法,向链表末尾插入一个节点 2.insert(posi ...
- pandas的数据联级
一．索引的堆(stack) 1.行列的转化: Stack():列转行 Unstack():行转列 Stack对应行, 使用小技巧:使用stack()的时候,level等于哪一个,哪一个就消失,出现在行 ...
- sql规范
(一) 建表规约 -------------- 1. [强制]表达是与否概念的字段,必须使用is_xxx的方式命名,数据类型是unsigned tinyint( 1表示是,0表示否). > 说明 ...
- AES加密、解密工具类
AES加密.解密工具类代码如下: package com.util; import java.io.IOException; import java.io.UnsupportedEncodingExc ...
- destoon添加修改会员信息时，信息丢失
最近做一destoon项目,因注册字段太多,分了几个步骤.分几个页面来修改公司信息.发现有时候修改时以前保存的字段莫名丢失.. 经查是 因为member.class.php add 和 edit时, ...
- linux系统入门—文件管理
目录 linux系统入门-文件管理 系统目录结构 目录管理 linux系统入门-文件管理 系统目录结构 几乎所有的计算机操作系统都是使用目录结构组织文件.具体来说就是在一个目录中存放子目录和文件,而在 ...
- python 程序小测试
python 程序小测试 对之前写的程序做简单的小测试 ... # -*- encoding:utf-8 -*- ''' 对所写程序做简单的测试 @author: bpf ''' def GameOv ...