当前位置:小鱼儿玄机二站 > 计算机网络 > Module类的方法,Module方法详解

Module类的方法,Module方法详解

文章作者:计算机网络 上传时间:2019-09-03

AngularJS是什么?

AngularJS中的Module类负担定义应用怎么着运维,它还足以经过注明的秘技定义应用中的种种部分。大家来探视它是怎么促成这几个功用的。

AngularJs(前边就简称ng了)是二个用来设计动态web应用的构造框架。首先,它是三个框架,不是类库,是像EXT同样提供一条龙方案用于设计web应用。它不只是三个javascript框架,因为它的主导其实是对HTML标签的增长。


何为HTML标签加强?其实正是让你能够用竹签完结部分页面逻辑,具人体模型式正是由此自定义标签、自定义属性等,这几个HTML原生未有的价签/属性在ng中有八个名字:指令(directive)。前面会详细介绍。那么,什么又是动态web应用呢?与历史观web系统相分裂,web应用能为顾客提供丰富的操作,能够随客户操作不断更新视图而不开展url跳转。ng官方也扬言它更适用于付出CRUD应用,即数据操作很多的选拔,而非是娱乐或图像处理类使用。

一.Main艺术在哪儿
   假如你是从Java或许Python编制程序语言转过来的,那么您大概很想精通AngularJS里面包车型客车main方法在哪里?那么些把具有东西运维起来,并且第贰个被实践的主意在何地?JavaScript代码里面担负实例化况且把具备东西组成到共同,然后命令应用发轫运营的非凡格局在何地?

为了达成那几个,ng引进了有些那多少个棒的风味,包罗模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让咱们摆脱繁琐的DOM操作,而将集中力集中在事情逻辑上。

实际上,AngularJS并从未main方法,AngularJS使用模块的概念来代表main方法。模块允许大家透过证明的点子来说述应用中的注重关系,以及哪些开展组装和开发银行。使用这种情势的缘由如下:

  其他贰个疑忌,ng是MVC框架吗?依然MVVM框架?官方网站有涉嫌ng的宏图使用了MVC的大旨情想,而又不完全部是MVC,因为在书写代码时大家实在是在用ng-controller这些命令(起码从名字上看,是MVC吧),但以此controller管理的业务基本上都以与view实行互动,这么看来又很类似MVVM。让大家把目光移到官方网址那些非醒目标title上:“AngularJS — Superheroic JavaScript MVW Framework”。

  1. 模块是证明式的。那就象征它编写起来越发轻松,同一时候领悟起来也很轻便,阅读它就像是读普通的保加阿伯丁语一样!
  2. 它是模块化的。那就强迫你去思量什么定义你的机件和依赖关系,让它们变得进一步清楚。
  3. 它让测量试验特别轻巧。在单元测试吕,你能够有选取地参预模块,何况能够幸免代码中存在无法实行单元测验的剧情。同有的时候间,在情景测验中,你能够加载其余额外的模块,那样就足以越来越好地和别的零件合营使用。

AngularJS中的Module类担当定义应用如何运营,它还足以经过证明的章程定义应用中的种种部分。大家来探视它是什么兑现那个意义的。

诸如,在我们的施用中有二个叫作"MyAwesomeApp"的模块。在HTML里面,只要把以下内容增加到<html>标签中(恐怕从技能上说,能够加上到任何标签中):

一.Main艺术在哪儿

<html ng-app="MyAwesomeApp">

        假如您是从Java或然Python编制程序语言转过来的,那么你大概很想驾驭AngularJS里面包车型大巴main方法在哪里?这一个把装有东西运行起来,况兼第三个被实行的章程在何地?JavaScript代码里面担当实例化並且把全体东西组成到手拉手,然后命令应用起先运营的那二个格局在哪里?

ng-app指令就能够告知AngularJS使用MyAwesomeApp模块来运转你的施用。那么,应该怎么定义模块呢?比方来讲,大家提议你为劳动、指令和过滤器分别定义分裂的模块。然后您的主模块能够注脚正视那些模块。

        事实上,AngularJS并不曾main方法,AngularJS使用模块的定义来代替main方法。模块允许大家由此注脚的主意来叙述应用中的重视关系,以及怎么着进展组装和运营。使用这种艺术的因由如下:

那般能够使得模块管理进一步轻易,因为它们都以美好的、完备的代码块,每一种模块有且独有一种功能。同一时间,单元测量试验能够只加载它们所关心的模块,那样就足以减掉开始化的次数,单元测量试验也会变得越来越精致、更引人瞩目。

        1.模块是注脚式的。这就象征它编写起来尤其轻巧,同一时候通晓起来也很轻松,阅读它似乎读普通的保加汉密尔顿语同样!


        2.它是模块化的。那就迫让你去斟酌怎么样定义你的组件和依附关系,让它们变得愈加显著。

二.加载和正视
   模块加载动作产生在多少个不等的级差,这点从函数名地点就能够展示出来,它们分别是Config代码块和Run代码块(或许叫做阶段)。
1. Config代码块
   在这一阶段里面,AngularJS会连接并登记好全部数据源。因而,独有数据源和常量能够注入到Config代码块中。那多少个不鲜明是还是不是业已初步化好的劳务不可能注入进来。

        3.它让测量试验越发便于。在单元测量试验吕,你可以有选用地参加模块,何况可以幸免代码中留存不或许张开单元测量检验的剧情。同期,在场景测验中,你能够加载别的额外的模块,这样就足以更加好地和其余零件协作使用。

  1. Run代码块
       Run代码块用来运转你的施用,并且在注射器创设完结之后开首实行。为了制止在这点开首未来再对系统举行安排操作,唯有实例和常量能够被注入到Run代码块中。你会意识,在AngularJS中,Run代码块是与main方法最周围的东西。

        比方,在大家的选取中有一个叫做"MyAwesomeApp"的模块。在HTML里面,只要把以下内容增多到<html>标签中(只怕从技艺上说,可以增进到其余标签中):


复制代码 代码如下:

三.飞速方法
   利用模块能够做什么呢?大家得以用它来实例化调整器[1]、指令[2]、过滤器[3]以及服务[4],可是使用模块类还是能做越多事情。如下模块配置的API方法:

<html ng-app="MyAwesomeApp">

  1. config(configFn) 配置
       利用此方法能够做一些注册职业,那一个干活儿索要在模块加载时做到。

     angular.module('myModule', [])
       . config(function(injectables) {                   // 配置(功能(注射剂)
         // provider-injector                             // 提供者喷射器
         // This is an example of config block.           // 这是一个示例的配置块。
         // You can have as many of these as you want.    // 你可以尽可能多的你想要的。
         // You can only inject Providers (not instances) // 只能注入提供者(而不是实例)
         // into config blocks.                           // 配置块。
       })
    
  2. constant(name, object) 常数恒量
       此方法会首先运转,所以你能够用它来声称整个应用范围内的常量,并且让它们在享有配置(config方法)和实例(前面包车型地铁装有办法,举例controller、service等)方法中可用。
       constant(常量)用来在配置阶段传递数值,注意这几个常量在配备阶段是不可用的。

     mainApp.constant("configParam", "constant value");
    
  3. controller(name,constructor) 控制器
       它的中坚职能是布置好调节器方便后边使用。

  4. directive(name,directiveFactory) 指令
       能够利用此措施在采纳中创制指令。

  5. filter(name,filterFactory) 过滤器
       允许你成立命名的AngularJS过滤器,就好像前面章节所谈论的那么。

  6. run(initializationFn) 运行
       假若你想要在注射器运行之后试行某个操作,而那一个操作供给在页面前境遇顾客可用以前推行,就足以行使此办法。

     run(function(injectables) {                         // 运行(函数(注射剂)
       // instance-injector                              // 实例喷射器
       // This is an example of a run block.             // 这是一块运行的一个例子。
       // You can have as many of these as you want.     // 你可以尽可能多的你想要的。
       // You can only inject instances (not Providers)  // 只能注入实例(而不是提供者)
       // into run blocks                                // 运行块
     });
    
  7. value(name,object)
       允许在全体应用中注射值。
       Value 是贰个简短的 javascript 对象,用于向调控器传递值(配置阶段):

     // 定义一个模块
     var mainApp = angular.module("mainApp", []);
     // 创建 value 对象 "defaultInput" 并传递数据
     mainApp.value("defaultInput", 5);
    
     // 将 "defaultInput" 注入到控制器
     mainApp.controller('CalcController', function($scope, CalcService, defaultInput) { 
       $scope.number = defaultInput; 
       $scope.result = CalcService.square($scope.number); 
       $scope.square = function() { 
         $scope.result = CalcService.square($scope.number); 
       }
     });
    
  8. factory(name,factoryFn)
        假诺您有二个类还是目的,供给首先为它提供部分逻辑只怕参数,然后技艺对它开头化,那么您就足以采取这里的factory接口。factory是一个函数,它承受创制一些一定的值(可能指标)。我们来看一个greeter(打招呼)函数的实例,那么些函数要求一条问候语来起首化:

     function Greeter(salutation) { 
       this.greet = function(name) { 
         return salutation + ' ' + name;
       };
     }
    

 ng-app指令就能够报告AngularJS使用MyAwesomeApp模块来运营你的运用。那么,应该怎样定义模块呢?举例来讲,大家提议您为服务、指令和过滤器分别定义区别的模块。然后你的主模块能够表明信赖那些模块。

greeter函数示举个例子下:

        这样能够使得模块管理尤其便于,因为它们都以美丽的、完备的代码块,各类模块有且唯有一种意义。同一时间,单元测量检验能够只加载它们所关注的模块,那样就能够减去起首化的次数,单元测试也会变得更加精致、更潜心。

    myApp.factory('greeter', function(salut) { 
      return new Greeter(salut);
    });

二.加载和重视

接下来能够这么来调用它:

        模块加载动作发生在多个不一样的等级,那点从函数名地点就足以展示出来,它们分别是Config代码块和Run代码块(大概叫做阶段)。

    var myGreeter = greeter('Halo');

1.Config代码块

factory 是贰个函数用于重临值。在 service 和 controller 须求时创制。
一般来说大家选取 factory 函数来总计或再次回到值。

        在这一阶段里面,AngularJS会连接并登记好全部数据源。由此,独有数据源和常量能够注入到Config代码块中。那个不分明是否已经初阶化好的劳务无法注入进来。

  1. service(name,object)
       factory和service之间的不相同点在于,factory会直接调用传递给它的函数,然后再次回到实践的结果;而service将会动用"new"关键字来调用传递给它的构造方法,然后再回去结果。所以,前面包车型地铁greeter Factory能够替换到下边那一个greeter 瑟维斯:

     myApp.service('greeter', Greeter);
    

2.Run代码块

每当大家须求三个greeter实例的时候,AngularJS就会调用新的Greeter()来回到二个实例。

        Run代码块用来运维你的行使,何况在注射器创立达成之后开头实行。为了制止在那一点开始之后再对系统举办配备操作,唯有实例和常量能够被注入到Run代码块中。你会发觉,在AngularJS中,Run代码块是与main方法最临近的东西。

  1. provider(name,providerFn)
       provider是那多少个法子中最复杂的有个别(显明,也是可配置性最棒的有的)。provider中既绑定了factory也绑定了service,並且在注入系统盘算截至从前,还能享受到铺排provider函数的平价(约等于config块)。
      AngularJS 中通过 provider 创制一个service、factory等(配置阶段)。
    Provider 中提供了三个 factory 方法 get(),它用于返回value/service/factory。
       大家来看看使用provider改换之后的greeter Service是哪些样子:

    myApp.provider('greeter', function() { 
      var salutation = 'Hello'; 
      this.setSalutation = function(s) { 
        salutation = s;
      } 
      function Greeter(a) { this.greet = function() { 
        return salutation + ' ' + a;
      }} 
      this.$get = function(a) { 
        return new Greeter(a);
      };
    });
    

三.急速方法

如此那般我们就足以在运维时动态设置问候语了(譬喻,能够依照客商使用的例外语言实行设置)。

        利用模块能够做什么样吗?大家能够用它来实例化调整器、指令、过滤器以及服务,不过采纳模块类还是能做越来越多专门的职业。如下模块配置的API方法:

    var myApp = angular.module(myApp, [])
      .config(function(greeterProvider) {
        greeterProvider.setSalutation('Namaste')    
      ;}
     );

1.config(configFn)

每当有人须要八个greeter实例时,AngularJS就能够在个中调用$get方法。

        利用此措施能够做一些报了名专门的学问,这个干活儿亟待在模块加载时产生。

附: angular.module('MyApp',[...])和angular.module('MyApp')之间有贰个非常的小然则却很主要的不一样点

2.constant(name, object)

angular.module('MyApp',[...])会创设四个新的Angular模块,然后把方括号([...])中的依赖列表加载进来;而angular.module('MyApp')会接纳由第二个调用定义的存活的模块。
   所以,对于以下代码,你须求保险在漫天应用中只会采取二次:

        此方法会首先运营,所以您能够用它来声称整个应用范围内的常量,并且让它们在具有配置(config方法)和实例(后边的享有办法,比如controller、service等)方法中可用。

angular.module('MyApp', [...]) //如果你的应用是模块化的,这里可能是MyModule

3.controller(name,constructor)

假设您不筹算把模块的援用存到贰个变量中,然后在全体应用中通过这几个变量来援用模块,那么,在任何文件中利用angular.module(MyApp)的章程能够有限支撑收获不错的AngularJS模块援引。模块上的具备东西都必得经过拜会那个模块援用来定义,也许在模块定义的位置把那多少个须求的内容丰盛上去。

        它的主导功用是布署好调控器方便前边使用。

4.directive(name,directiveFactory)

        能够动用此措施在动用中开创指令。

5.filter(name,filterFactory)

        允许你创设命名的AngularJS过滤器,就如前边章节所研商的那么。

6.run(initializationFn)

        借令你想要在注射器运营以往推行有些操作,而那几个操作须要在页面临客商可用以前实行,就能够使用此办法。

7.value(name,object)

        允许在全数应用中注射值。

8.factory(name,factoryFn)

        假若您有一个类依旧目的,要求首先为它提供部分逻辑也许参数,然后手艺对它早先化,那么您就足以选拔这里的factory接口。factory是三个函数,它担负创制一些特定的值(恐怕目的)。大家来看叁个greeter(打招呼)函数的实例,那一个函数供给一条问候语来最初化:

function Greeter(salutation) {
 this.greet = function(name) {
 return salutation + ' ' + name;
};
}

 greeter函数示比如下:

myApp.factory('greeter', function(salut) {
 return new Greeter(salut);
});

 然后方可如此来调用它:

var myGreeter = greeter('Halo');

9.service(name,object)

        factory和service之间的差别点在于,factory会直接调用传递给它的函数,然后回到实施的结果;而service将会选取"new"关键字来调用传递给它的构造方法,然后再重临结果。所以,后面包车型客车greeter Factory能够替换来上面这么些greeter Service:

myApp.service('greeter', Greeter);

 每当大家要求二个greeter实例的时候,AngularJS就能调用新的Greeter()来回到三个实例。

10.provider(name,providerFn)

        provider是这么些法子中最复杂的部分(显著,也是可配置性最佳的有个别)。provider中既绑定了factory也绑定了service,况且在注入系统筹算截止以前,还足以享受到安顿provider函数的功利(也正是config块)。

        大家来看看使用provider改变之后的greeter Service是如何样子:

myApp.provider('greeter', function() {
 var salutation = 'Hello';
 this.setSalutation = function(s) {
 salutation = s;
}
 function Greeter(a) {
 this.greet = function() {
 return salutation + ' ' + a;
}
}
 this.$get = function(a) {
 return new Greeter(a);
};
});

如此那般大家就能够在运维时动态设置问候语了(比方,能够依赖客户选用的不一致语言实行安装)。

var myApp = angular.module(myApp, []).config(function(greeterProvider) {
greeterProvider.setSalutation('Namaste');
});

你只怕感兴趣的文章:

  • 自学落成angularjs正视注入
  • AngularJS $injector 正视注入详解
  • AngularJs Dependency Injection(DI,注重注入)
  • AngularJS应用开辟合计之依赖注入3
  • AngularJS之注重注入模拟达成
  • AngularJS入门教程之XH奥德赛和信赖注入详解
  • AngularJS 看重注入详解及示范代码
  • AngularJS 注重注入详解和省略实例
  • AngularJS学习笔记之重视注入详解
  • 详解Angularjs中的信赖注入
  • AngularJs动态加载模块和依附注入详解
  • 详解AngularJS中的依赖注入机制
  • AngularJS的借助注入实例深入分析(使用module和injector)

本文由小鱼儿玄机二站发布于计算机网络,转载请注明出处:Module类的方法,Module方法详解

关键词: