Angular2入门教程之模块和组件详解 - 行业资讯 - 肥雀云

本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习、下面来一起看看详细的介绍:

之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件。

应用文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它。剩下的四个文件就是典型的模块+组件的文件组成模式。
　　

Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.component.ts。
　　

这几个文件的关系是从属关系:
　　

　　　　　　|——app.module.ts(模块) 　　& # 8195;|——app.component.ts(组件) 　　& # 8195;& # 8195;|——app.component.html (HTML模板) 　　& # 8195;& # 8195;|——app.component.css (CSS样式表) 　　　　

一个模块可以有多个组件,一个组件也可以有多个样式表,但只有一个HTML模板。

<强> 1.1组件的含义

Angular2中的组件,就是我们自定义的一段HTML代码,给他取个名字,就可以当作HTML的标签使用了假。如组件的名字是我的程序,那么就可以这样使用:

　　　　　　& lt; div> 　　& lt; my-app> & lt; my-app>//可以像原生标签一样添加属性,而且组件能接收的属性更丰富//标签里面也可以放内容　　& lt;/div> 　　　　

组件其实是一个类,它定义了一系列方法和属性,并且把HTML模板封装起来。它的意义是,你可以把它当做一个独立的隔离的盒子,并利用其中的方法和属性进行盒子内部的操作,以及和外界的父组件,兄弟组件交互。

<强> 1.2模块的含义

模块就是将一系列的组件还有指令,服务整合封装到一起,提供一个完整的功能。模块可以被外部模块引用。

<强> 2.1根模块

每个应用会有一个根模块,按照约定,它的类名叫做AppModule,被放在app.module。ts文件中。应用启动时,就会加载这个模块。
　　

每个根模块会有一个根组件,默认就是app.component.ts,名字是app-root。
　　

查看项目目录中的index . html,会发现有<代码> & lt; app-root>加载…& lt;/app-root> 这样的代码,就是在加载这个根模块。

<强> 2.2模块详解

下面是app.module.ts的代码。

　　　　　　从“@angular/platform-browser”进口{BrowserModule},//每个在浏览器中运行//的应用的根模块都需要引入BrowserModule 　　从“@angular进口{NgModule}/核心”;//每个模块都需要引入的核心库中的NgModule 　　从@angular/形式的进口{FormsModule},//表单模块,在应用中使用表单时引入　　从“@angular/http”进口{step 4},//http模块,当需要进行http远程请求时引入　　　　从“进口{AppComponent}。/app.component’;//自己创建的组件　　　　@NgModule ({ 　　声明:[ 　　AppComponent 　　), 　　进口:[ 　　BrowserModule, 　　FormsModule, 　　step 4 　　), 　　供应商:[], 　　引导(AppComponent): 　　}) 　　出口类AppModule {} 　　　　

Angular2用打印稿组织代码的方式大致就像这个文件一样。

1,在顶部使用导入语句,导入模块或者组件需要使用的外部模块。
　　

在模块中需要使用自己创建的组件或者其他服务,指令,也需要导入。
　　

2,导入语句之后,使用<代码> @NgModule() 语句描述本模块的元数据。

3,最后,使出口语用句,创建模块的类并暴露出去。
　　

模块,组件只有暴露出去,其他的模块才能引用。

　　　　　　从“@angular进口{组件}/核心”;//所有组件必须引入　　　　@ component ({ 　　选择器:“app-root”, 　　templateUrl:“。/app.component.html”, 　　styleUrls (“。/app.component.css”): 　　}) 　　出口类AppComponent { 　　title=坝τ霉ぷ?你已经完成了第一步”; 　　}