angular2 NgModel模块的具体使用方法

angular2 NgModel 模块

在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。我们也可以通过定义子模块来扩展我们应用的功能。

NgModule 的API

interface NgModule {
   // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
   //      然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
  providers : Provider[]
   // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
   //        然后我们就可以在这个模块中使用它们了.
  declarations : Array<Type<any>|any[]>
   // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
   //     可以直接使用别的模块提供的一些指令,组件等等.
  imports : Array<Type<any>|ModuleWithProviders|any[]>
   // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
   //     如果别的模块导入了我们这个模块,
   //     那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
  exports : Array<Type<any>|any[]>
  // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
  //         Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
  entryComponents : Array<Type<any>|any[]>
  // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
  bootstrap : Array<Type<any>|any[]>
  // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
  schemas : Array<SchemaMetadata|any[]>
  // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
  //   那么这个模块将不会被注册.
  id : string
 }

常用API简介

NgModule的主要属性如下：

  • declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员，声明之后才能使用对应的组件等。
  • providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中）
  • imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。

子模块

随着程序的壮大，单一的根模块已不能清晰的划分职责，这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样，所有的模块共享一个运行期上下文和依赖注入器。

功能模块与根模块的职责区别主要有以下两点：

  • 根模块的目的在于启动app，功能模块的目的在于扩展app
  • 功能模块可以根据需要暴露或隐藏具体的实现

Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件，目的是为了提高应用的流畅性，但是如果是运行在mobile中的app，加载一个大文件可能会过慢，所以rc5提供了一种延迟加载方式。

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
 { path: '', redirectTo: 'contact', pathMatch: 'full'},
 { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延迟加载子模块，子模块的结构和父模块一样，它会去加载子模块中的Routes配置，并跳转对应的组件中去。
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中，path指明路径，loadChildren指明使用延迟加载，'app/crisis/crisis.module#CrisisModule'指明了模块的路径，和模块的名称。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

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

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • angular4自定义组件非input元素实现ngModel双向数据绑定的方法

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... 网上找了一下,没看懂记录一下. 场景:组件能获取父组件通过ngModel绑定的值,能通过ngModel改变父组件对应的数据.如下代码: <app-child [(ngModel])="appData"></app-child> 1.先贴出效果图: 2.下面是app-

  • 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

    angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Can't bind to 'ngModel' since it isn't a known property of 'input'. 解决办法: 在文件 app.component.ts 中引入ngModel 具体为: 添加两行代码: import { FormsModule } from '@angular/forms'; 和 FormsModule, 位置如下: 以上这篇解决angular2在双向数据绑定时[(

  • angular4自定义表单控件[(ngModel)]的实现

    [(ngModel)]拆分 [(ngModel)] 将[]输入()输出组合起来,进行双向数据绑定.拆分开来 输入属性 [ngModel](ngModelChange)输出监听元素值的变化,并同步view value与model value. 复制代码 代码如下: <input type="text" id="modelInner" [ngModel]="model" (ngModelChange)="getModelChange(

  • Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

    "对呀对呀!--回字有四样写法,你知道么?",当时鲁大大如此讽刺孔乙己,意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲.但是在Angular 2的世界中,很少存在无用之物,ngModel有三种写法,你知道吗? 表单的设计永远都是应用的重头戏,而其中最基本的功能点即是通过一个个输入组件实现的,为此Angular 2为我们提供了锋利的武器:ngModel.而其不同的使用方式有着大不相同的作用: ngModel 如果单独使用ngModel,且没有为其赋值的话,它会在其所在的ngFor

  • Angularjs之ngModel中的值验证绑定方法

    众所周知,在Angular中ngModel为动态双向绑定,存在两种方式. 例如, 方式一: 在html中, <input type="text" ng-model="searchText" /> <button ng-click="check(searchText)">Check!</button> {{ searchText }} 在controller中 $scope.check = function (s

  • 详解Angular Forms中自定义ngModel绑定值的方式

    在 Angular 应用中,我们有两种方式来实现表单绑定--"模板驱动表单"与"响应式表单".这两种方式通常能够很好的处理大部分的情况,但是对于一些特殊的表单控件,例如 input[type=datetime] . input[type=file] ,我们需要重写默认的表单绑定方式,让我们绑定的变量不再仅仅只是一个字符串,而是一个 Date 或者 File 对象.为了达成这一目的,我们需要自定义表单控件的 ControlValueAccessor . Control

  • AngularJS ngModel实现指令与输入直接的数据通信

    AngularJS ngModel实现指令与输入直接的数据通信

    首先来看一下效果,在拖动input[range]的时候,下面的动画会随着拖动而发生改变,利用的原理就是ngModel实现的通信.实现的原理就是通过在指令中引入^ngModel来实现指令内部与外部之间的通信. 下面有几个点: 1.$formatters中push进去的函数实现modelValue转成valeuValue. 2.$render方法实现把viewValue中的值渲染到模板中. 3.$setViewValue实现的是更新模板中的viewValue值. 4.$parsers中push进去的

  • angular2 NgModel模块的具体使用方法

    angular2 NgModel 模块 在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们.我们也可以通过定义子模块来扩展我们应用的功能. NgModule 的API interface NgModule { // providers: 这个选项是一个数组,需要我们列出我们这个

  • AngularJS动态加载模块和依赖的方法分析

    本文实例讲述了AngularJS动态加载模块和依赖的方法.分享给大家供大家参考,具体如下: 前言 由于AngularJS是单页面应用框架,在正常的情况下,会在访问页面的时候将所有的CSS.JavaScript文件都加载进来.文件不多的时候,页面启动速度倒不会影响太多.但是一旦文件数太多或者加载的第三方库比较大的时候,就会影响页面启动速度.因此对于应用规模大.文件数比较多或者加载的第三方库比较大的时候,采用动态加载JS或者动态加载模块会极大提升页面的启动速度.本文将介绍如何利用ocLazyLoad

  • python安装cx_Oracle模块常见问题与解决方法

    本文实例讲述了python安装cx_Oracle模块常见问题与解决方法.分享给大家供大家参考,具体如下: 安装或使用cx_Oracle时,需要用到Oracel的链接库,如libclntsh.so.10.1,否则会有各种各样的错误信息. 安装Oracle Instant Client就可得到这个链接库,避免安装几百兆之巨的Oracle Client. 软件下载地址: cx_Oracle的主页:http://cx-oracle.sourceforge.net/ 必需的Oracle链接库的下载地址:h

  • 详解用webpack把我们的业务模块分开打包的方法

    详解用webpack把我们的业务模块分开打包的方法

    webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记 如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,

  • PHP 5.6.11中CURL模块问题的解决方法

    PHP 5.6.11中CURL模块问题的解决方法

    按照网上的教程写了一个cURL的小例子,在apache环境下执行,一点反应也没有,放在IIS环境里就ok的,感觉问题一定出在动态连接库上,因为配置文件里的php_curl.dll已经打开了,而且在iis上ok: 网上找了一些解决方案: 设置了[环境变量]:phpext,PHPRC:无效 把php_curl.dll 放到apache/bin下:无效 检查了一下apache/bin目录下也有这两个libeay32.dll,ssleay32.dll个文件:没问题 最后试了一下,把当前php根目录下的l

  • Thinkphp5.0自动生成模块及目录的方法详解

    Thinkphp5.0自动生成模块及目录的方法详解

    本文实例讲述了Thinkphp5.0自动生成模块及目录的方法.分享给大家供大家参考,具体如下: Thinkphp5.0发布已有些时日了,据说性能方面有很大的提升,按照官方的话,ThinkPHP5.0版本是一个颠覆和重构版本,采用全新的架构思想,引入了很多的PHP新特性,优化了核心,减少了依赖,实现了真正的惰性加载,并针对API开发做了大量的优化.是时候得download一份,研究一下.今天主要讲讲其自动创建模块及目录. Thinkphp5.0自动生成模块较ThinkPHP3.2,确实有很大的变化

  • php检测apache mod_rewrite模块是否安装的方法

    本文实例讲述了php检测apache mod_rewrite模块是否安装的方法.分享给大家供大家参考.具体实现方法如下: /** * @title Check if Apache's mod_rewrite is installed. * * @author Pierre-Henry Soria <ph7software@gmail.com> * @copyright (c) 2013, Pierre-Henry Soria. All Rights Reserved. * @return bo

  • Python基于pygame模块播放MP3的方法示例

    本文实例讲述了Python基于pygame模块播放MP3的方法.分享给大家供大家参考,具体如下: 安装pygame(可参考:安装Python和pygame及相应的环境变量配置) pip安装这个whl文件 装完就直接跑代码啦,很短的 import time import pygame file=r'C:\Users\chan\Desktop\Adele - All I Ask.mp3' pygame.mixer.init() print("播放音乐1") track = pygame.m

  • Python的SimpleHTTPServer模块用处及使用方法简介

    Python的SimpleHTTPServer模块用处及使用方法简介

    搭建FTP,或者是搭建网络文件系统,这些方法都能够实现Linux的目录共享.但是FTP和网络文件系统的功能都过于强大,因此它们都有一些不够方便的地方.比如你想快速共享Linux系统的某个目录给整个项目团队,还想在一分钟内做到,怎么办? 很简单,使用SimpleHTTPServer. 各种Linux发行版通常都内置了Python,故使用此方法非常方便.在其它OS(比如Windows)此方法也有效,但是要麻烦一些,必须先搭建Python环境. SimpleHTTPServer是Python 2自带的

  • Angular2.0实现modal对话框的方法示例

    本文实例讲述了Angular2.0实现modal对话框的方法.分享给大家供大家参考,具体如下: 觉得写的比较巧妙的就是样式的选取~记录下 CSS部分 .font { font-family: "Microsoft YaHei", Arial; font-size: 12px; color: #333333; } .ky-modal-content { min-width: 520px; min-height: 240px; } .ky-modal-header { /*height :

随机推荐