深入浅析AngularJS中的module,Module类的主意

By admin in 4858美高梅 on 2019年7月14日

什么是AngularJS的模块

深切浅析AngularJS中的module(模块),angularjsmodule

什么是AngularJS的模块

咱俩所说的模块,是你的AngularJS应用程序的一个组成都部队分,它能够是三个Controller,也可以是贰个Service服务,也能够是贰个过滤器(Filter),也得以是二个directive(指令)等等…都以属于一个模块!

绝大许多的应用程序都以有多个投机的函数入口方法Main
,用它来实行初叶化,以及加载装配各样模块,然后这么些模块的组成,构成了你的应用程序,对吧?

不过,but, AngularJS应用程序却不是那样的啊,它未有main
方法,未有函数入口。替代之的是在模块中钦定注解那个模块在AngularJS应用程序中该怎么去加载,运维。

这种艺术有以下多少个优点:

1) 使用注脚的主意,令人特别轻松精通。

2) 你能够进一步便于的让您的代码进行录取。

3) 模块的加载顺序就越是便于调整了。因为这一个模块是延迟试行的。

4)
对于开始展览单元测验就变得更加的福利了。更加可相信,你只须要载入那么些模块就足以拓展测量试验了。

5) 端对端的测验中,你能够选取模块去重写配置。

在AngularJS中module是贰当中坚的留存,包含了好些个地点,举个例子controller,
config, service, factory, directive, constant, 等等。

在Javascript中怎么样落到实处类似module的效劳吗?

大概说,大家定义多少个函数,怎么着把函数内的函数向外面开放呢?

本身想,能够把函数中的函数作为一个对象的键值,进而向外面开放。

那般说很暧昧,其实是那样的:

var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 

举个银行存小钱取钱的例证。

var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为: " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为: " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 

再到来AngularJS,大家曾经无独有偶了这么写:

var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
... 

也正是获得到module,再调用module提须要大家的艺术。

查看angular.js源代码,发现:

angular = window.angular || (window.angular = {} )

那是干什么大家能使用angular那一个变量的原因。

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
... 

上述的写法正是module的写法。

PS:angular.module(‘MyApp’,[…])和angular.module(‘MyApp’)之间有三个异常的小可是却很入眼的区别点

       
angular.module(‘MyApp’,[…]深入浅析AngularJS中的module,Module类的主意。)会创建叁个新的Angular模块,然后把方括号([…])中的信赖列表加载进来;而angular.module(‘MyApp’)会采用由第叁个调用定义的共处的模块。

        所以,对于以下代码,你须求确认保障在整整应用中只会使用一遍:

4858美高梅 ,angular.module(‘MyApp’, […])
//要是你的运用是模块化的,这里也许是MyModule

       
假诺您不策动把模块的援引存到两个变量中,然后在整个应用中通过那些变量来援引模块,那么,在别的文件中动用angular.module(MyApp)的艺术能够确认保障收获不错的AngularJS模块援用。模块上的有所东西都必须透过拜望那几个模块引用来定义,大概在模块定义的地点把这几个供给的剧情丰裕上去。

AngularJS是一款来自谷歌(Google)的前端JS框架,它的主干特性有:MVC、双向数据绑定、指令和语义化标签、模块化学工业具、看重注入、HTML模板,以及对常用工具的包装,比方$http、$cookies、$location等。

AngularJS中的Module类担当定义应用怎么样运转,它还足以透过表明的章程定义应用中的各种部分。大家来看看它是何等落实这几个成效的。

大家所说的模块,是您的AngularJS应用程序的贰个组成都部队分,它能够是八个Controller,也得以是三个Service服务,也足以是四个过滤器(Filter),也足以是一个directive(指令)等等…都以属于一个模块!

您大概感兴趣的篇章:

  • AngularJS中的模块详解
  • AngularJS模块管理难题的极度规管理方法
  • 举个例子解说AngularJS中的模块
  • angularjs学习笔记之三大模块(modal,controller,view)
  • AngularJS Module方法详解
  • 详解AngularJS中module模块的导入导出

什么是AngularJS的模块
大家所说的模块,是你的AngularJS应用程序的四个组成都部队分,它可以是三个…

关于AngularJS中module的导入导出,在Bob告诉作者此前还没写过,感激鲍伯在那上头的点拨,给到本人案例代码。


绝大好多的应用程序都以有贰个团结的函数入口方法Main
,用它来拓展初步化,以及加载装配种种模块,然后这个模块的结合,构成了你的应用程序,对吧?

在AngularJS实际项目中,大家可能须求把针对有些世界的各类方面放在不相同的module中,然后把种种module汇总到该领域的一个文本中,再由主module调用。正是如此:

一.Main主目的在于哪儿

 假使您是从Java恐怕Python编制程序语言转过来的,那么您或许很想清楚AngularJS里面包车型地铁main方法在哪里?那么些把全部东西运行起来,何况第一个被实施的点子在哪个地方?JavaScript代码里面担当实例化並且把富有东西组成到一块儿,然后命令应用开头运转的不市场价格势在哪儿?

不过,but, AngularJS应用程序却不是这么的啊,它从未main
方法,未有函数入口。替代之的是在模块中钦点证明那个模块在AngularJS应用程序中该怎么去加载,运行。

4858美高梅 1

实则,AngularJS并未main方法,AngularJS使用模块的定义来代替main方法。模块允许我们由此申明的方式来描述应用中的依赖关系,以及怎么着进行组装和起步。使用这种方法的缘故如下:

这种艺术有以下多少个亮点:

上述,app.mymodule1,
app.mymodule2,app.mymodule都以针对性某些世界的,举个例子app.mymodule第11中学定义directive,
app.mymodule第22中学定义controller,
app.mymodule把app.mymodule1和app.mymodule2汇总到一处,然后app那些主module依赖app.mymodule。

  1. 模块是注脚式的。那就表示它编写起来越发轻松,同有的时候候精通起来也很轻巧,阅读它就疑似读普通的德文同样!
  2. 它是模块化的。那就强逼你去思维什么定义你的零部件和信赖关系,让它们变得越来越清晰。
  3. 它让测验越发便于。在单元测量检验吕,你可以有选取地插网络麻豆块,何况可以制止代码中存在无法张开单元测验的故事情节。同不日常间,在气象测量试验中,你可以加载别的额外的模块,那样就足以更加好地和其他零件合营使用。

1) 使用注明的诀窍,令人越发轻便精晓。

文件结构:

比方,在大家的使用中有贰个称作”MyAwesomeApp”的模块。在HTML里面,只要把以下内容加多到<html>标签中(可能从本领上说,能够增添到任何标签中):

2) 你能够特别便于的令你的代码实行录取。

mymodule/
…..helloworld.controller.js <在app.mymodule2中>
…..helloworld.direcitve.js <在app.mymodule1中>
…..index.js <在app.mymodule中>
…..math.js <在贰个独门的module中>

<html ng-app="MyAwesomeApp">

3) 模块的加载顺序就更为轻松调控了。因为这个模块是延迟实行的。

app.js <在app这个module中>

ng-app指令就可以告知AngularJS使用MyAwesomeApp模块来运营你的运用。那么,应该如何定义模块呢?举个例子来讲,大家指出你为劳动、指令和过滤器分别定义分裂的模块。然后您的主模块能够评释正视那些模块。

4)
对于进行单元测量试验就变得进一步的福利了。越发可相信,你只需求载入那么些模块就能够张开测验了。

index.html

这么能够使得模块管理进一步轻易,因为它们都以优异的、完备的代码块,各样模块有且唯有一种效应。同临时间,单元测验能够只加载它们所关心的模块,那样就足以削减开端化的次数,单元测验也会变得更加小巧、更引人瞩目。

5) 端对端的测量检验中,你能够行使模块去重写配置。

helloworld.controller.js:
var angular = require('angular');
module.exports = angular.module('app.mymodule2', []).controller('HWController', ['$scope', function ($scope) {
 $scope.message = "This is HWController";
}]).name; 

在AngularJS中module是三个基本的留存,包蕴了无数上边,譬喻controller,
config, service, factory, directive, constant, 等等。

以上,通过module.exports导出module,通过require导入module。

二.加载和正视

 模块加载动作发生在多少个例外的阶段,那点从函数名地点就能够显示出来,它们各自是Config代码块和Run代码块(只怕叫做阶段)。
1. Config代码块

 在这一等第里面,AngularJS会连接并登记好全体数据源。因而,唯有数据源和常量能够注入到Config代码块中。那个不确定是还是不是业已开端化好的劳动不能够注入进来。

在Javascript中怎样落到实处类似module的功力吗?

helloworld.direcitve.js:
var angular=require('angular');
module.exports = angular.module('app.mymodule1', []).directive('helloWorld', function () {
 return {
  restrict: 'EA',
  replace: true,
  scope: {
   message: "@"
  },
  template: '<div><h1>Message is {{message}}.</h1><ng-transclude></ng-transclude></div>',
  transclude: true
 }
}).name; 
  1. Run代码块

     Run代码块用来运维你的施用,並且在注射器创制完结之后先河实践。为了制止在这点先河过后再对系统举办布置操作,唯有实例和常量能够被注入到Run代码块中。你会开采,在AngularJS中,Run代码块是与main方法最相仿的东西。

或然说,咱们定义多个函数,怎样把函数内的函数向外围开放呢?

进而,在index.js把pp.mymodule1和app.mymodule2汇总到一处。


本人想,能够把函数中的函数作为叁个指标的键值,进而向外围开放。

var angular = require('angular');
var d = require('./helloworld.directive');
var c = require('./helloworld.controller');
module.exports = angular.module('app.mymodule', [d, c]).name;

三.神速方法

 利用模块能够做哪些吧?大家得以用它来实例化调节器[1]、指令[2]、过滤器[3]以及劳动[4],然而使用模块类还足以做更多工作。如下模块配置的API方法:

如此说很暧昧,其实是这么的:

在math.js中:

  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;
       };
     }
    
var myModule = function outerFuction(){
  var method1 = new function(){}
  var method2 = new function(){}
  return{
    method1: method1,
    method2, method2
  }
}
var o = outerFucntion();
o.method1();
o.mehtod2(); 
exports = {
 add: function (x, y) {
  return x + y;
 },
 mul: function (x, y) {
  return x * y;
 }
}; 

greeter函数示比方下:

举个银行积攒闲钱取钱的例证。

最后,在app.js中引用app.mymodule1:

    myApp.factory('greeter', function(salut) { 
      return new Greeter(salut);
    });
var account = function(){
 //余额
 var balance = 0;
 //存钱
 var deposit = function(money){
  balance+=money;
  console.log("卡上余额为: " + balance);
  notifyUser();
 }
 //取钱
 var withdraw = function(money){
  balance -= money;
  console.log("卡上余额为: " + balance)
  notifyUser();
 }
 //通知用户
 var notifyUser = function(){
  console.log("卡上余额有变动");
 }
 return {
  deposit:deposit,
  withdraw: withdraw
 }
}
var a1 = account();
a1.deposit(100);
a1.withdraw(50); 
var angular = require('angular');
var mymodule = require('./mymodule');
var math = require('./mymodule/math');
angular.module('app', [mymodule])
 .controller('AppController', ['$scope', function ($scope) {
  $scope.message = "hello world";
  $scope.result = math.add(1, 2);
 }]);

接下来能够如此来调用它:

再到来AngularJS,我们曾经习贯了如此写:

上述所述是小编给大家享受的AngularJS中module模块的导入导出,希望大家爱怜。

    var myGreeter = greeter('Halo');
var app = angular.module('app',[]);
app.config();
app.controller();
app.factory();
... 

您或然感兴趣的小说:

  • AngularJs动态加载模块和依赖注入详解
  • 深远浅析AngularJS中的module(模块)
  • angularjs学习笔记之三大模块(modal,controller,view)
  • AngularJS中的模块详解
  • Jquery中.bind()、.live()、.delegate()和.on()之间的分别详解
  • 详解VUE中v-bind的中央用法
  • vue学习笔记之指令v-text && v-html &&
    v-bind详解
  • 浓密浅析AngularJs模版与v-bind

factory 是三个函数用于再次来到值。在 service 和 controller 要求时创设。
经常大家运用 factory 函数来计量或再次来到值。

也便是取获得module,再调用module提需要大家的方法。

  1. service(name,object)

     factory和service之间的分裂点在于,factory会直接调用传递给它的函数,然后回来执行的结果;而service将会接纳”new”关键字来调用传递给它的构造方法,然后再回来结果。所以,前边的greeter
    Factory能够替换来上边这几个greeter 瑟维斯:

     myApp.service('greeter', Greeter);
    

查看angular.js源代码,发现:

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

angular = window.angular || (window.angular = {} )
  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);
      };
    });
    

那是怎么我们能选取angular那几个变量的缘由。

那样大家就能够在运营时动态设置问候语了(譬喻,能够依附用户选拔的分化语言实行安装)。

...
var moduleInstace = {
    provider: invokeLater('$provide','provider'),
    factory: invokeLater('$provider', 'factory'),
    service: invokeLater('$provider', 'service'),
    value: invokeLater('$provide', 'value'),
    constant: invokeLater('$provider', 'constant'...),
    animation: invokeLater('$animateProvider',...),
    filter: invokeLater('$filterProvider',...),
    controller: invokeLater('$controllerProvider',...),
    directive: invokeLater('$compileProvider',...),
    config: config,
}
return moduleInstance;
... 
    var myApp = angular.module(myApp, [])
      .config(function(greeterProvider) {
        greeterProvider.setSalutation('Namaste')    \
      ;}
     );

如上的写法就是module的写法。

每当有人要求二个greeter实例时,AngularJS就能在中间调用$get方法。

PS:angular.module(‘MyApp’,[…])和angular.module(‘MyApp’)之间有一个一点都不大不过却很主要的不一致点

附:
angular.module(‘MyApp’,[…])和angular.module(‘MyApp’)之间有一个异常的小不过却很关键的差异点

       
angular.module(‘MyApp’,[…])会创立一个新的Angular模块,然后把方括号([…])中的注重列表加载进来;而angular.module(‘MyApp’)会使用由第3个调用定义的并存的模块。

angular.module(‘MyApp’,[…])会创建三个新的Angular模块,然后把方括号([…])中的信赖列表加载进来;而angular.module(‘MyApp’)会动用由第贰个调用定义的存活的模块。
   所以,对于以下代码,你须求确认保证在整整应用中只会动用叁遍:

        所以,对于以下代码,你须求确定保证在全方位应用中只会动用二次:

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

angular.module(‘MyApp’, […])
//借让你的运用是模块化的,这里恐怕是MyModule

一旦您不打算把模块的引用存到贰个变量中,然后在漫天应用中经过这一个变量来援引模块,那么,在别的文件中动用angular.module(MyApp)的章程得以确认保证收获不错的AngularJS模块援引。模块上的具备东西都必须通过拜见那个模块援用来定义,只怕在模块定义的地点把那么些须要的原委充分上去。

       
要是你不准备把模块的援用存到三个变量中,然后在全路应用中经过那一个变量来援用模块,那么,在任何文件中运用angular.module(MyApp)的不二秘技得以确认保证收获正确的AngularJS模块援用。模块上的全数东西都不能够不通过访问这几个模块引用来定义,或然在模块定义的地点把那一个须要的原委丰硕上去。

您恐怕感兴趣的篇章:

  • AngularJs动态加载模块和重视注入详解
  • 详解AngularJS中module模块的导入导出
  • angularjs学习笔记之三大模块(modal,controller,view)
  • AngularJS中的模块详解
  • Jquery中.bind()、.live()、.delegate()和.on()之间的分别详解
  • 详解VUE中v-bind的主题用法
  • vue学习笔记之指令v-text && v-html &&
    v-bind详解
  • 深切浅析AngularJs模版与v-bind

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有