angularJS依赖注入的个人理解
依赖注入：一句话 --- 没事你不要来找我，有事我会去找你。
AngularJS 5个核心组件用来作为依赖注入：
- value
- factory
- service
- provider
- constant
value：想来就是一个map定义了当前对象的变量，使用时将key放在function（key）参数列表中
constant：一个全局变量
mainApp.constant("configParam", "constant value");
service：像是一个普通函数，亦或者中间商，负责函数的调用
controller函数在调用时在参数位置添加先前定义的service函数，
service函数也可以通过相同的方法调用factory函数内定义的方法。
在java普通spring项目中，controller调用service，service调用业务代码，想来也差不多。
controller('CalcController', function($scope, CalcService, defaultInput) {
1 <html>
2
3 <head>
4 <meta charset="utf-8">
5 <title>AngularJS 依赖注入</title>
6 </head>
7
8 <body>
9 <h2>AngularJS 简单应用</h2>
10
11 <div ng-app = "mainApp" ng-controller = "CalcController">
12 <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
13 <button ng-click = "square()">X<sup>2</sup></button>
14 <p>结果: {{result}}</p>
15 </div>
16
17 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
18
19 <script>
20 var mainApp = angular.module("mainApp", []);
21 mainApp.value("defaultInput", 5);
22
23 mainApp.factory('MathService', function() {
24 var factory = {};
25
26 factory.multiply = function(a, b) {
27 return a * b;
28 }
29 return factory;
30 });
31
32 mainApp.service('CalcService', function(MathService){
33 this.square = function(a) {
34 return MathService.multiply(a,a);
35 }
36 });
37
38 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
39 $scope.number = defaultInput;
40 $scope.result = CalcService.square($scope.number);
41
42 $scope.square = function() {
43 $scope.result = CalcService.square($scope.number);
44 }
45 });
46
47 </script>
48
49 </body>
50 </html>
provider：感觉着与factory差不多，至少步骤差不多，按照刚才说的java的逻辑，也许只是业务代码的实现变了样子。
1 //provider 实现 一小部分
2
3 var mainApp = angular.module("mainApp", []);
4
5 mainApp.config(function($provide) {
6 $provide.provider('MathService', function() {
7 this.$get = function() {
8 var factory = {};
9
10 factory.multiply = function(a, b) {
11 return a * b;
12 }
13 return factory;
14 };
15 });
16 });
17
18 //factory实现 一小部分
19
20 var mainApp = angular.module("mainApp", []);
21
22 mainApp.factory('MathService', function() {
23 var factory = {};
24
25 factory.multiply = function(a, b) {
26 return a * b;
27 }
28 return factory;
29 });
1 //provider 完整代码
2
3 <html>
4
5 <head>
6 <meta charset="utf-8">
7 <title>AngularJS 依赖注入</title>
8 </head>
9
10 <body>
11 <h2>AngularJS 简单应用</h2>
12
13 <div ng-app = "mainApp" ng-controller = "CalcController">
14 <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
15 <button ng-click = "square()">X<sup>2</sup></button>
16 <p>结果: {{result}}</p>
17 </div>
18
19 <script src="//cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
20
21 <script>
22 var mainApp = angular.module("mainApp", []);
23
24 mainApp.config(function($provide) {
25 $provide.provider('MathService', function() {
26 this.$get = function() {
27 var factory = {};
28
29 factory.multiply = function(a, b) {
30 return a * b;
31 }
32 return factory;
33 };
34 });
35 });
36
37 mainApp.value("defaultInput", 5);
38
39 mainApp.service('CalcService', function(MathService){
40 this.square = function(a) {
41 return MathService.multiply(a,a);
42 }
43 });
44
45 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
46 $scope.number = defaultInput;
47 $scope.result = CalcService.square($scope.number);
48
49 $scope.square = function() {
50 $scope.result = CalcService.square($scope.number);
51 }
52 });
53
54 </script>
55
56 </body>
57 </html>
2020-11-13 15:46:10
angularJS依赖注入的个人理解的更多相关文章
- 关于angularjs依赖注入的整理
初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...
- AngularJS依赖注入
<html> <head> <meta charset="utf-8"> <title>AngularJS 依赖注入</tit ...
- AngularJS 依赖注入
依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...
- 个人对于angularjs依赖注入的理解
依赖注入(Dependency Injection,DI),作者认为本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源". 对象或者函数只有以下3种获取 ...
- 记录对依赖注入的小小理解和autofac的简单封装
首先,我不是一个开发者,只是业余学习者.其次我的文化水平很低,写这个主要是记录一下当前对于这块的理解,因为对于一个低水平 的业余学习者来说,忘记是很平常的事,因为接触.应用的少,现在理解,可能过段时间 ...
- AngularJS开发指南10：AngularJS依赖注入的详解
依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前 ...
- （五）Angularjs - 依赖注入
如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...
- AngularJS - 依赖注入(Dependency Injection)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 依赖注入 依赖注入是软件设计模式中的一部分,用于处理组件是如何得到它说依赖的其它组件的. ...
- C# 一个初学者对 依赖注入 IOC 的理解( 含 Unity 的使用)
通过 人打电话 来谈谈自己对IOC的理解 版本1.0 public class Person { public AndroidPhone Phone { get; set; } public void ...
- 控制反转（IOC) 和依赖注入(DI) 的理解
1. IOC(控制反转) inverseof control是spring容器的内核,AOP.声明事务等功能在此基础上开花结果. 2. 通过实例理解IOC概念: 实例:<墨攻 ...
随机推荐
- mysql主从备份双机热备实现方法
1.环境准备 主服务器(master):192.168.1.1 从服务器(slave):192.168.1.2 要求主从服务器mysql版本相同且大于3.23 2.主服务器 2.1创建同步用户 cre ...
- Linux 库的使用
Linux 库的使用 -I头文件的路径-L动态库的路径 命名 使用 静态库 lib名字.a 静态库路径/lib名字.a 动态库 lib名字.so -L动态库路径 -l名字 编译 #静态编译 # g ...
- ESP8266-01S 烧录AT固件
首先就是下载官网的下载软件和AT固件 这是下载好了的 然后就是硬件电路了 我是想把ESP8266用于Ardiuno板子的,然后网上有说买的USBTOTTL的3v3供电不够,所以我就用的Ardiuno板 ...
- 「SOL」NOI2017Day2 T1T2
就当我没做过这套题 而且 T3 也不会 Day2 A. 游戏 > Link 游戏 - LOJ 做过 2-sat 的读者应该能够一眼秒出这道题的正解 -- \(\mathcal O(2^d)\) ...
- Spring RMI 介绍
Spring RMI RMI全称是Remote Method Invocation-远程方法调用,是纯Java的网络分布式应用系统的核心解决方案之一.Java RMI 支持存储于不同地址空间的程序级对 ...
- 29 Django自定义模板功能
在相应的app文件夹中,创建templatetags文件夹,必须是templatetags文件夹命名: 注意:templatetags文件夹中必须要有__init__.py文件 jd.py: from ...
- java mybatisplus+springboot服务器跨域问题
项目本地增删改测试正常,上传到 阿里服 页面出现了 跨域报错问题! 解决方案:添加一个过滤器 package com.rl;import org.springframework.stereotyp ...
- Java字符串的一些函数方法
一.substring()方法 String str="123456"; String s1=str.substring(2); //s1="3456" Str ...
- 身为一个java开发人员对目前java开发的一些小小的认识
为什么要学java? 第一要工作,第二想要高薪 首先身为java开发工作人员你的思想认知程度要搞,思想认知程度决定你的专业技能水平 JavaSE工程师 B/S 架构 ---- 浏览器 ...
- 随机生成四则运算表达式【Unity】
根据自己项目需求调整代码中表达式的公共方法 using System.Collections; using System.Collections.Generic; using System; usin ...