AngularJs Injecting Services Into Controllers详解

2024-10-15 04:08:52

　把service当作被依赖的资源加载到controller中的方法，与加载到其他服务中的方法很相似。

　　由于javascript是一个动态语言，DI不能弄明白应该通过static types（like in static typed languages）注入哪一个service。因此，我们需要通过$inject属性指定service名称，它是一个包含需要注入的service名称的字符串数组。service ID顺序的重要性：工厂方法中的参数顺序，与service在数组中的顺序一致。工厂方法的参数名称并不重要，但是按照惯常的做法，他们与service ID一一匹配，下面将讨论这样做的好处。

1.显式依赖注入

function myController($scope,$loc,$log) {
　　$scope.firstMethod = function() {
  　　//使用$location service
   　$loc.setHash();
  };
　　$scope.secondMethod = function() {
    //使用$log service
    $log.info(‘…')
　　};
}
myController.$inject = [‘$location','$log'];

例子：

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
  <meta charset="UTF-8">
  <title>explicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
  <input type="text" ng-model="msg"/>
  <button ng-click="saveMsg()">save msg</button>
  <ul>
    <li ng-repeat="msg in msgs">{{msg}}</li>
  </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("MainApp",[],function($provide) {
    $provide.factory("notify",["$window","$timeout",function(win,timeout) {
      //这里是服务依赖服务，通过这种显式的方式，参数名可以乱填，但顺序要对应
      var msgs = [];
      return function(msg) {
        msgs.push(msg);
        if(msgs.length==3) {
          timeout(function() {
            win.alert(msgs.join("\n"));
            msgs = [];
          },10);
        }
      }
    }]);
  });

  function MyController($s,$noti) {
    //这里是controller依赖服务，通过这种显式的方式，参数名可以乱填，但顺序要对应
    $s.msgs = [];
    $s.saveMsg = function() {
      this.msgs.push(this.msg);
      $noti(this.msg);
      this.msg = "";
    };
  }
  //指定注入的东东
  //也可以参考http://www.cnblogs.com/lcllao/archive/2012/10/16/2725317.html里面的例子
  MyController.$inject = ['$scope','notify'];

</script>
</body>
</html>

　2. 隐式依赖注入

　angular DI的一个新特性，允许通过参数名称决定依赖。让我们重写上面的例子，展示如何隐式注入$window、$scope与notify service。

例子：

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="MainApp">
<head>
  <meta charset="UTF-8">
  <title>implicit-inject-service</title>
</head>
<body>
<div ng-controller="MyController">
  <input type="text" ng-model="msg"/>
  <button ng-click="saveMsg()">save msg</button>
  <ul>
    <li ng-repeat="msg in msgs">{{msg}}</li>
  </ul>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("MainApp",[],function($provide) {
    $provide.factory("notify",function($window,$timeout) {
      //服务依赖服务，隐式依赖，名称一致即可
      var msgs = [];
      return function(msg) {
        msgs.push(msg);
        if(msgs.length==3) {
          $timeout(function() {
            $window.alert(msgs.join("\n"));
            msgs = [];
          },10);
        }
      }
    });
  });

  function MyController($scope,notify) {
    //服务依赖服务，隐式依赖，名称一致即可
    $scope.msgs = [];
    $scope.saveMsg = function() {
      this.msgs.push(this.msg);
      notify(this.msg);
      this.msg = "";
    };
  }
</script>
</body>
</html>

　　虽然这样很方便，但是假如我们需要压缩、混淆我们的代码，这可能会导致参数名称被更改，遇到这种情况的时候，我们还是需要使用显式声明依赖的方式。

以上就是关于AngularJS Injecting Services Into Controllers的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

AngularJS控制器controller正确的通信的方法

AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro
Angularjs中controller的三种写法分享

前言在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco
AngularJS Controller作用域

$scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现) HTML正文:  <body ng-app="myAp
angularjs学习笔记之三大模块（modal，controller，view）

今天主要跟大家详细讲解一下angularjs的三大模块: modal,controller,view. 首先跟大家说一下这三个模块之间的关系. 1.数据模型(modal)主要提供数据.它不会和视图(view)直接操作. 2.controller保存modal提供的数据,与视图进行操作. 3.view是视图,也就是页面展示. 4.总而言之,controller负责数据和视图之间的通信,就是两者的接口人.他们分工明确,实现了模块化. 一.如何使用数据模型(modal)? 讲到数据模型,我们再来看一下
AngularJS ng-controller 指令简单实例

AngularJS ng-controller 指令 AngularJS 实例为应用变量添加控制器: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head&g
AngularJS利用Controller完成URL跳转

具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button
AngularJs根据访问的页面动态加载Controller的解决方案

用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的control
AngularJS实践之使用NgModelController进行数据绑定

前言在Angular应用中,ng-model指令时不可缺少的一个部分,它用来将视图绑定到数据,是双向绑定魔法中重要的一环.ngModelController则是ng-model指令中所定义的controller.这个controller包含了一些用于数据绑定,验证,CSS更新,以及数值格式化和解析的服务.它不用来进行DOM渲染或者监听DOM事件.与DOM相关的逻辑都应该包含在其他的指令中,然后让这些指令来试用ngModelController中的数据绑定功能. 注意:本篇文章不是对NgMode
AngularJS入门心得之directive和controller通信过程

AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生
AngularJs学习第五篇从Controller控制器谈谈$scope作用域

Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

AngularJs Injecting Services Into Controllers详解

相关推荐

随机推荐