Angular2入门教程之模块和组件详解

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

一、初步了解模块和组件

之前给大家介绍了构建工程,这篇文章简单讲述一下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模板封装起来。它的意义是,你可以把它当做一个独立的隔离的盒子,并利用其中的方法和属性进行盒子内部的操作,以及和外界的父组件、兄弟组件交互。

1.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';//每个在浏览器中运行
//的应用的根模块都需要引入BrowserModule
import { NgModule } from '@angular/core';//每个模块都需要引入的核心库中的NgModule
import { 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组织代码的方式大致就像这个文件一样。

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

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

2、import语句之后,使用@NgModule()语句描述本模块的元数据。

  • declarations:声明属于本模块的组件,每个组件必须在且仅在一个模块中声明。
  • imports:引入买本模块中用到的模块,该模块是处于import语句引入的模块中。
  • providers:声明模块中使用的服务的提供者,暂时还没有用到。
  • bootstrap:根模块中的引导组件,应用启动过程中,会创建这个数组中的组件并插入到HTML中,一般只有一个引导组件。

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

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

三、组件详解

import { Component } from '@angular/core'; //所有组件必须引入

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works! 你已经完成了第一步';
}

1、import语句导入需要的模块。

2、使用@Component()来描述本组件的元数据。

  • selector:创建的组件的名字,就像HTML标签的名字一样
  • templateUrl: HTML模板,使用相对路径,./表示这个组件文件所在的当前目录,
  • styleUrls:HTML模板使用的样式表,可以有多个。

3、最后,使用export创建组件的类并暴露出去。在类中,可以创建属性和方法。

四、应用启动过程

整个应用的启动流程:加载根模块,加载所需的其他模块,创建引导组件,显示组件内容。

注意:我觉得学习Angular2很好的方法之一就是去看官方教程,有中文版的,很方便。看完前面的开发指南部分就足以了解Angular2的大致原理了,当然官方教程有的地方概念可能很模糊,有地方不了解的同学,可以留言交流,谢谢大家对我们的支持。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助。

(0)

相关推荐

  • Angular2开发——组件规划篇

    本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型.其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一.在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画.而属性型指令则用于完善组件的功能,比如接收用

  • Angular2学习教程之组件中的DOM操作详解

    前言 有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素. 指令中的DOM操作 @Directive({ selector: 'p' }) export class TodoD

  • Angular2入门教程之模块和组件详解

    本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

  • PHP入门教程之上传文件实例详解

    本文实例讲述了PHP上传文件的方法.分享给大家供大家参考,具体如下: Demo1.php <form enctype="multipart/form-data" action="Demo2.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 上传文件: &

  • C#入门教程之集合ArrayList用法详解

    本文实例讲述了C#入门教程之集合ArrayList用法.分享给大家供大家参考,具体如下: .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合.这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.下面我们主要来讲一下ArrayList. ArrayList是命名空间Systrm.Collections下的一部分,它是使用大小可按需动态增加的数组实现IList接口. ArrayList的容量是ArrayList可以保存的元素数.ArrayList的默认初

  • PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)

    本文实例讲述了PHP自定义函数用法.分享给大家供大家参考,具体如下: Demo1.php <?php //标准函数,内置函数 echo md5('123456'); echo '<br/>'; echo sha1('123456'); echo '阅谁问君诵,水落清香浮.'; ?> Demo2.php <?php //创建函数,不要跟系统的内置函数重名 //函数有个特性,必须调用,才可以执行 //无参数表示()里面是空的,无返回就是函数的程序里没有 return functi

  • TypeScript基础入门教程之三重斜线指令详解

    前言 TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript.当然最后代码还是编译为Javascript. 三斜杠指令是包含单个XML标记的单行注释. 注释的内容用作编译器指令. 三斜杠指令仅在其包含文件的顶部有效. 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令. 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义. /// <reference path ="..."/> /// <re

  • Node.js基础入门之使用方式及模块化详解

    目录 什么是Node.js ? Node.js下载 Node.js和JavaScript的区别 Node.js安装与验证 Node.js使用方式 1. REPL模式 2. 文件模式 Node.js模块化 1. 什么是模块? 2. 模块分类 3. 创建自定义模块 4. 调用自定义模块 5. 模块测试 6. 主模块 7. 模块组成 在这个竞争日益激烈的今天,已经不是一门语言,一项技术走天下的时代了.正所谓艺多不压身,今天开始学习Node.js,学而时习之,不亦乐乎,希望可以借鉴经验,学以致用,如有不

  • 基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • Vue 2.0入门基础知识之内部指令详解

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

  • Python入门之三角函数sin()函数实例详解

    描述 sin()返回的x弧度的正弦值. 语法 以下是sin()方法的语法: importmath math.sin(x) 注意:sin()是不能直接访问的,需要导入math模块,然后通过math静态对象调用该方法. 参数 x--一个数值. 返回值 返回的x弧度的正弦值,数值在-1到1之间. 实例 以下展示了使用sin()方法的实例: #!/usr/bin/python import math print "sin(3) : ", math.sin(3) print "sin(

  • Python入门之三角函数tan()函数实例详解

    描述 tan() 返回x弧度的正弦值. 语法 以下是 tan() 方法的语法: import math math.tan(x) 注意:tan()是不能直接访问的,需要导入 math 模块,然后通过 math 静态对象调用该方法. 参数 x -- 一个数值. 返回值 返回x弧度的正弦值,数值在 -1 到 1 之间. 实例 以下展示了使用 tan() 方法的实例: #!/usr/bin/python import math print "tan(3) : ", math.tan(3) pr

随机推荐