美文网首页
angularjs 依赖注入和服务

angularjs 依赖注入和服务

作者: darr250 | 来源:发表于2016-11-29 19:56 被阅读0次

依赖注入的是服务。
app.controller app.filter app.directive app.config 都会注入服务。
但是 angular.module:
angular.module(name, [requires], [configFn]);这里没有依赖注入。 这是模块管理。

AngularJS的服务

依赖注入

依赖注入(Dependency Injection)是一种经典的设计模式,主要是用来处理组件如何获取依赖的问题。

依赖注入可以简单的理解为:在一个容器中我们定义了很多个模块和组件化服务,当模块需要某些服务时,只需要跟容器说我需要这些服务,并且只需要提供服务的名称,容器就会自动提供这些服务的实例。调用服务的模块不需要考虑这些服务是怎么来的,这些服务会由容器通过依赖注入提供给对应的模块。

注入声明方式

AngularJs一共提供了三种注入方式
推断式的注入声明,显示注入声明,行内注入声明

注意的地方:当依赖注入的服务定义在了另一个模块中,首先需要将该模块注入到被依赖的模块中,然后才能调用该模块的服务

行内:

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$window', function ($scope, $window) {
// do something
}]);

AngularJS内置服务

Paste_Image.png

服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化),并且是延迟加载的(需要时才会被创建)。服务提供了把与特定功能相关联的方法集中在一起的接口。提供了在应用整个生命周期保持数据的方法, 比如下面的例子,每个controller里都可以拿到和改变foo.a,保存用户登陆等信息中我们用到了:

 .controller("myCtrl", ["foo", function( foo){
     foo.sayHello();  
    console.log(foo.a);
}])
.factory("foo", function(){
  return {
    a: 1,
    sayHello: function(){
      this.a++;
      console.log("hello")
    }
  }
})

服务是一个对外提供某个特定功能,如消息服务、文件压缩等的独立模块。在AngularJS中,服务是一个单例对象或者函数。具有以下的两个特点:

  • 服务是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例
  • 定义服务的方式也是通过function,但是与我们自己定义一个function然后在其他地方调用不同,因为服务是被定义在一个模块中,所以其使用的范围是可以被管理的,这一点体现了AngularJS非常强的避免全局变量污染意识。

代表性的内置服务

  • $rootScope

每个应用都仅有一个rootScope。其他的例如controller中的scope都是rootScope的后代scope。scope通过监听数据层的变化,实现了数据层和模型层的分离。注册在$rootScope上的值可以被子$scope覆盖。

  • $http

$http服务是AngularJS和远程服务器通过ajax请求进行通信的核心服务。$http的API是基于$q服务的,它返回的是一个promise。根据返回的状态码判断执行成功的回调还是失败的回调,当状态码为200到299时执行成功回调,不在这个范围内的都执行失败回调。

  • $q

$q服务是AngularJS自己封装的一种对Promise的实现,使用$q一般有两种方式。

  1. $q构造方法
    $q的构造方法接收一个函数,该函数接收resolve和reject两个参数,分别代表成功和失败后的回调函数
  2. $q的defer()方法
  • $location

$location是用于解析地址栏URL的服务,可以监听和改变地址栏的URL。当改变地址栏或者点击前进和后退时可以与浏览器同步URL

相关文章

  • Angular基础学习-04

    本节包括AngularJS 依赖注入及路由 AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依...

  • angularjs 依赖注入和服务

    依赖注入的是服务。app.controller app.filter app.directive app.co...

  • 资料收集

    依赖注入 AngularJs依赖注入的研究 (已读) 依赖注入(已读)

  • AngularJS 依赖注入

    什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计...

  • AngularJs依赖注入

    推断式注入声明 如果没有明确的声明, AngularJS会假定参数名称就是依赖的名称。因此,它会在内部调用函数对象...

  • AngularJS中的依赖注入

    1.背景介绍 依赖注入式AngularJS的重要特性之一,依赖注入简化了Angular解析模块/组件之间依赖的过程...

  • AngularJS入门案例

    AngularJS入门 ​ AngularJS核心的特性就是:MVC模式、模块化、双向绑定、依赖注入等特性。利...

  • AngularJS学习之依赖注入

    什么是依赖注入 AngularJS采用的是模块化的方式来组织代码的,它会将一些通用逻辑封装成一个对象或者函数,实现...

  • angularJS中的依赖注入

    大家好,我是IT修真院成都分院第7期的学员韩建名,一枚正直纯洁善良的WEB前端程序员。 今天给大家带来的是:ang...

  • angularJS中的依赖注入

    1.背景介绍 以前原始社会,我们需要斧子,然而由于还没有社会分工,只能自己打磨一把使用,对应在程序上是我们需...

网友评论

      本文标题:angularjs 依赖注入和服务

      本文链接:https://www.haomeiwen.com/subject/wsfzpttx.html