<html>

   <head>

      <meta charset="utf-8">

      <title>AngularJS  依赖注入</title>

   </head>

   <body>

      <h2>AngularJS 简单应用</h2>

      <div ng-app = "mainApp" ng-controller = "CalcController">

         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>

         <button ng-click = "square()">X<sup>2</sup></button>

         <p>结果: {{result}}</p>

      </div>

      <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

      <script>

         var mainApp = angular.module("mainApp", []);

         // 使用 provider 创建 service 定义一个方法用于计算两数乘积

         /*mainApp.config(function($provide) {

            $provide.provider('MathService', function() {

               this.$get = function() {

                  var factory = {};

                  factory.multiply = function(a, b) {

                     return a * b;

                  }

                  return factory;

               };

            });

         });*/

         // 创建 value 对象 "defaultInput" 并传递数据

         mainApp.value("defaultInput", 5);

         // 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers

         mainApp.factory('MathService', function() {

            var factory = {};

            factory.multiply = function(a, b) {

               return a * b;

            }

            return factory;

         });

         // 在 service 中注入 factory "MathService"

         mainApp.service('CalcService', function(MathService){

            this.square = function(a) {

               return MathService.multiply(a,a);

            }

         });

         // CalcService 和 defaultInput 是前面定义的service和默认值

         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

            $scope.number = defaultInput;

            $scope.result = CalcService.square($scope.number);

            // 按钮 ng-click="square" 绑定

            $scope.square = function() {

               $scope.result = CalcService.square($scope.number);

            }

         });

      </script>

   </body>

</html>

AngularJS依赖注入的更多相关文章

  1. AngularJS 依赖注入

        依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该 ...

  2. 关于angularjs依赖注入的整理

    初学angularjs阶段,刚刚看到菜鸟教程的angularjs依赖注入.现在整理一下: 1.含义:一个或更多的依赖(可以理解为模块关系依赖)或服务(分为内建服务[例如$http,$tiomeout等 ...

  3. AngularJS开发指南10：AngularJS依赖注入的详解

    依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前 ...

  4. （五）Angularjs - 依赖注入

    如何找到API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. 比如,AngularJS暴露了一个全局对象:angu ...

  5. AngularJS - 依赖注入(Dependency Injection)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 依赖注入 依赖注入是软件设计模式中的一部分,用于处理组件是如何得到它说依赖的其它组件的. ...

  6. angularjs 依赖注入--自己学着实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...

  7. AngularJS——依赖注入

    依赖注入    依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题.关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/art ...

  8. 个人对于angularjs依赖注入的理解

    依赖注入(Dependency Injection,DI),作者认为本文中所有名词性的"依赖" 都可以理解为 "需要使用的资源". 对象或者函数只有以下3种获取 ...

  9. angularjs 依赖注入原理与实现

    在用angular依赖注入时,感觉很好用,他的出现是 为了“削减计算机程序的耦合问题” ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个这么牛逼的功能.于是 ...

随机推荐

  1. JavaScript弹窗

    警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...

  2. AutoMapper的介绍与使用（二）

    AutoMapper的匹配 1,智能匹配 AutoMapper能够自动识别和匹配大部分对象属性: 如果源类和目标类的属性名称相同,直接匹配,不区分大小写 目标类型的CustomerName可以匹配源类 ...

  3. 设计模式（九）装饰者模式（Decorator Pattern）

    一.引言 在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).A ...

  4. JavaWeb_day07_JSP

    本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! day07 JSP 全称 :Java Server P ...

  5. JDBC 详解(转载)

    原文链接:http://blog.csdn.net/cai_xingyun/article/details/41482835 什么是JDBC? Java语言访问数据库的一种规范,是一套API JDBC ...

  6. Java的Debug调试

    一.在项目上右键,Debug As>Debug on Server 二.在测试类上,Run As>Run On Server

  7. APP级别处理未捕获异常

    前言: 项目APP有时候会出现Crash,然后就是弹出系统强制退出的对话框,点击关闭APP. 有的APP进行了处理,会发现,当程序出现异常的时候,会Toast一个提示"程序出现异常,3秒后将 ...

  8. iOS版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

  9. 软件海贼团 OnePiece （版权所有）

    最近迷上了“海贼王”这部动画片,不仅仅是因为其中的人物个个性格鲜明,剧情跌宕起伏扣人心弦,各种耍宝搞笑,还感觉到这个团队很像理想中的敏捷软件团队. 作为一直带团队的我,感觉“海贼王”这个动画片给了我很 ...

  10. 下载本 WebEnh博客 安卓APP

    暂时还在学习开发安卓和苹果APP应用,写得一般,以后会更新的,谢谢大家关注.对了这个是用HTML5+写的哦.不太难,但是要搞懂还是要多花点时间了,有时间就会更新的 ... ...