<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. Lua BehaviourTree 各节点说明

    项目说明 本行为树的代码使用Lua编写,所有的内容也建立的Lua的基础语法之上 因为公司项目需求,需要一套Lua的行为树代码,所以尝试从饥荒中抽离了行为树相关的代码.绝大多数节点行为与饥荒中相同,不过 ...

  2. 文字处理控件TX Text Control的使用

    这几天一直在研究TX Text Control的使用,由于这方面的资料相对比较少,主要靠下载版本的案例代码进行研究,以及官方的一些博客案例进行学习,使用总结了一些心得,特将其总结出来,供大家分享学习. ...

  3. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  4. spider RPC框架的需求来源与特性介绍（一）

    spider RPC 特性介绍 spider RPC 性能测试 spider RPC 入门指南 spider RPC 配置文件参考 spider RPC 开发指南 spider RPC 安全性 spi ...

  5. 移动端web自适应解决方案： adaptive.js

    代码有更新,最好直接查看github github:https://github.com/finance-sh/adaptive adaptivejs利用rem解决移动端页面开发的自适应问题 页面模板 ...

  6. JavaScript 常用代码

    未知对象 对象类型名称:xobject.constructor.name 对象成员键名:Object.keys(xobject) 枚举对象成员及其值:for(var propertyName in r ...

  7. 静态库介绍与简单演练及同名资源冲突解决(.a格式的静态库)

    1.静态库和动态库都是闭源库,不公开源代码. 静态库:.a和.framework 动态库:.dylib和.framework(iOS9取消了.dylib,使用.tbd替代) 2.静态库和动态库在使用上 ...

  8. 将Oracle数据库中的数据写入Excel

    将Oracle数据库中的数据写入Excel 1.准备工作 Oracle数据库"TBYZB_FIELD_PRESSURE"表中数据如图: Excel模板(201512.xls): 2 ...

  9. 初识Azkaban

    先说下hadoop 内置工作流的不足 (1)支持job单一 (2)硬编码 (3)无可视化 (4)无调度机制 (5)无容错机制 在这种情况下Azkaban就出现了 1)Azkaban是什么 Azkaba ...

  10. C# 中Switch case 返回不止用break

    Switch(temp) { case "A": //跳出循环 break; case "B": //返回值 return var; case "C& ...