Angular2入门之模块与组件
来源:互联网 发布:c语言初级程序 编辑:程序博客网 时间:2024/06/05 18:51
1.初步了解模块和组件
在上两篇文章中讲述了构建工程,这篇文章简单讲述一下Angular2中的模块和组件。
app
文件夹下有五个文件,其中,app.component.spec.ts
应该是和模块测试有关的文件,目前不用管它。剩下的四个文件就是典型的模块+组件的文件组成模式。Angular2应用由模块和组件构成,每个模块这样明明
name.module.ts
,组件则是name.component.ts
。这几个文件的关系是从属关系:
|--app.module.ts(模块)
|--app.component.ts(组件)
|--app.component.html(HTML模板)
|--app.component.css(CSS样式表)
一个模块可以有多个组件,一个组件也可以有多个样式表,但只有一个HTML模板。
1.1组件的含义
Angular2中的组件,就是我们自定义的一段HTML代码,给他取个名字,就可以当作HTML的标签使用了。假如组件的名字是my-app
,那么就可以这样使用:
<div> <my-app><my-app>//可以像原生标签一样添加属性,而且组件能接收的属性更丰富 //标签里面也可以放内容</div>
组件其实是一个类,它定义了一系列方法和属性,并且把HTML模板封装起来。它的意义是,你可以把它当做一个独立的隔离的盒子,并利用其中的方法和属性进行盒子内部的操作,以及和外界的父组件、兄弟组件交互。
2.模块详解和根模块
2.1 根模块
每个应用会有一个根模块,按照约定,它的类名叫做AppModule,被放在app.module.ts
文件中。应用启动时,就会加载这个模块。
每个根模块会有一个根组件,默认就是app.component.ts
,名字是app-root
。
查看项目目录中的index.html
,会发现有<app-root>Loading...</app-root>
这样的代码,就是在加载这个根模块。
2.2 模块详解
下面是app.module.ts
的代码。
import { BrowserModule } from '@angular/platform-browser';//每个在浏览器中运行//的应用的根模块都需要引入BrowserModuleimport { NgModule } from '@angular/core';//每个模块都需要引入的核心库中的NgModuleimport { FormsModule } from '@angular/forms';//表单模块,在应用中使用表单时引入import { HttpModule } from '@angular/http';//http模块,当需要进行http远程请求时引入import { AppComponent } from './app.component';//自己创建的组件@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }
Angular2用TypeScript组织代码的方式大致就像这个文件一样。
- 在顶部使用
import
语句,导入模块或者组件需要使用的外部模块。
在模块中需要使用自己创建的组件或者其他服务、指令,也需要import
。 import
语句之后,使用@NgModule()
语句描述本模块的元数据。declarations:
声明属于本模块的组件,每个组件必须在且仅在一个模块中声明。imports:
引入买本模块中用到的模块,该模块是处于import
语句引入的模块中。providers:
声明模块中使用的服务的提供者,暂时还没有用到。bootstrap:
根模块中的引导组件,应用启动过程中,会创建这个数组中的组件并插入到HTML中,一般只有一个引导组件。
最后,使用
export
语句,创建模块的类并暴露出去。
模块、组件只有暴露出去,其他的模块才能引用。
3.组件详解
import { Component } from '@angular/core'; //所有组件必须引入@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'app works! 你已经完成了第一步';}
import
语句导入需要的模块。@Component()
来描述本组件的元数据。selector:
创建的组件的名字,就像HTML标签的名字一样templateUrl:
HTML模板,使用相对路径,./
表示这个组件文件所在的当前目录,styleUrls:
HTML模板使用的样式表,可以有多个。
export
创建组件的类并暴露出去。在类中,可以创建属性和方法。4.应用启动过程
整个应用的启动流程:加载根模块,加载所需的其他模块,创建引导组件,显示组件内容。
注意:我觉得学习Angular2很好的方法之一就是去看官方教程,有中文版的,很方便。看完前面的开发指南部分就足以了解Angular2的大致原理了,当然官方教程有的地方概念可能很模糊,有地方不了解的同学,可以留言,我会解答。
原文:http://www.jianshu.com/p/1102d886aebe
阅读全文
0 0
- Angular2入门之模块与组件
- angular2之组件通讯
- angular2学习 之 组件
- Angular2组件与Echarts饼状图交互之饼图制作
- Angular2组件与Echarts饼状图交互之添加点击事件
- Angular2之入门示例
- Angular2组件与指令的小实践
- angular2 组件
- angular2 组件
- 3.认识Angular2组件之1
- Angular2之组件交互和数据绑定
- Angular2 之 路由与导航
- 《Angular2入门系列基础》——angular2组件入门(一)
- Angular2(八)--module化(核心模块与共享模块)
- Angular2 快速入门 之 环境搭建
- angular2 父子组件数据传递之@Input和@Output详解
- angular2.0之路由与导航
- angular2之路由与导航(一)
- 在win7下配置Geany,使其使用 Python 3
- 极光推送
- 遍历已加载的驱动sys_魔域驱动
- 2013年计算机联考真题——确定主元
- 主席树-查询区间有多少个不同的数
- Angular2入门之模块与组件
- 【2017/8/11】Linux7 rsync+inotify实现服务器之间文件实时同步
- 举例说明EIP,EBP,ESP的作用
- Redis笔记20170811视频
- Java基础——Java语言基础1
- PHPStorm 常用快捷键大全
- 河南省多校连萌(三)【B-Bar ABCDEFGH 问题 E: QAQ & 君临天下 || 天行九歌】
- DEDE织梦CMS模板在runphp=yes的标签中调用其他field值的方法
- SPOJ CIRUT(CIRU2-圆的面积并与恰被覆盖k次区域的面积)