Angular - - angular.injector、angular.module

angular.injector

创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入。

格式:angular.injector(modules);

modules:  Array 注入的模块(一个或多个)。

使用代码:

  (function () {
    angular.module("firstModule", [])
    .service("firstService", function () {
      this._log = function () {
          console.log("Hello World!!!");
      }
  });
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
      var injector = angular.injector(["firstModule"]);
      injector.get("firstService")._log();//Hello World!!!
    };
  }());

在上面的代码里,我们没有在angular.module里对Demo模块进行firstModule模块的依赖注入,那么是不是就意味我们不能在 Dome模块里使用firstModule模块的函数了咯?其实并不然,Angular 有$injector服务来处理注入这件事情。我们这里的angular.injector也是依赖这个服务的,所以我们能在Dome模块里使用它引入 firstModule模块,然后调用firstModule模块里的方法。

这个方法是创建一个对象,这个对象大家可以打印出来看看,对象上有一些方法,具体关于他的描述将会在学习及翻译到$injector的时候详细的讲 解。我们这里用到的是get方法,使用这个方法获取到firstModule模块的service服务,然后再执行里面的_log函数。

angular.module

创建一个全局的可用于检索和注入的Angular模块。所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制。

格式:angular.module(name,[requires],[configFn]);

name :  string  创建的模块名称。

[requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组。

[configFn]:对该模块的一些配置。

使用代码:

  angular.module("Demo", ["ui.router"],function(){//config })

angular.module是在1.3版本以后必须写上的,在刚使用Angular的时候下载的是1.2.8的版本,那会启动的时候只需要在 根节点的Dom元素上写个ngApp就好,在js里面可以直接function个controller,然后在对应的div写上ng- controller就好。然而1.3版本以后,要求必须定义模块名,用angular.module创建这个模块。

这里需要注意的是,第三个参数很少用,他其实就是和.config()一样,所以我们大多都使用.config()给模块做配置,这样的写法比较清晰明确,而且可以放在其他js里面配置,比较方便。

还有就是第二个参数,今天网上有小伙伴问我,为什么根据某个插件的使用教程文章说的依赖注入该插件的模块名会报错说模块名错误,对于这种问题,如果你需要使用某个插件,但你又不知道或者不确定他的模块名,你可以打开该插件的js代码,找到angular.module("XXX", []),这个XXX就是你需要注入到你模块里的模块名...

时间: 2024-10-20 11:52:13

Angular - - angular.injector、angular.module的相关文章

angular.equals()、angular.extend()、angular.foreach()、angular.fromJson()、angular.identity()等

angular.equals(o1, o2) 解释:参数o1和o2的比较(参数可以为变量.数组.对象) demo:angular.equals({name:'xxx'},{name:'yyy'}); //$ false angular.extend(dst, src) dst:被扩展的目标 src:扩展的对象 解释:对象的扩展,存在的类型进行值得覆盖,不存在的增加该类型. demo: var dst = {name: 'xxx', country: 'China'}; var src = {na

@野兽的Angular Api 学习、翻译及理解 - - angular.module

@野兽的 ng api 学习 -- angular.module angular.module 创建一个全局的可用于检索和注入的Angular模块.所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制. 格式:angular.module(name,[requires],[configFn]); name :  string  创建的模块名称. [requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组.

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

angular之$watch、$watchGroup、$watchCollection

1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带当前scope为参数的函数 - `string`: Evaluated as {@link guide/expression expression} - `function(scope)`: called with curre

野兽的Angular Api 学习、翻译及理解 - - $rootScope.Scope

野兽的ng api学习 -- $rootScope.Scope 这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通过$new()方法创建子作用域.(大多子作用域是在HTML模板被执行编译时自动生成) 格式:$rootScope.Scope([Providers],[instanceCache]) [Providers]:当前作用域需要被提供的服务工

angular之$broadcast、$emit、$on传值

文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j

angular.extend、angular.$watch、angular.bootstrap

1.angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象. 直接上代码来的简单明了: <script type="text/javascript" src="js/angular.min.js" ></script> <script type="text/javascript">

web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知,不问自晓,古今行事,未之有也 」 我们都知道如今流行的框架:Vue.Js.AngularJs.ReactJs.已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种. 在了解MVVM之前,我们先回想一下前端发展的历史阶段,做到心中有数,才会更好理解. 这段回想历史.由于网上就可查不少资料,