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的大致原理了,当然官方教程有的地方概念可能很模糊,有地方不了解的同学,可以留言交流,谢谢大家对我们的支持。

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

时间: 2017-05-26

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学习教程之ng中变更检测问题详解

开发中遇到的问题 在开发中遇到一个这样的问题,代码不便透露,这里用简单的例子还原一下问题所在: 有三个组件,第一个是用来展示Todo列表的组件TodoComponent,Todo是个类,包含id和name属性. @Component({ selector: 'todo-list', template: ` <p *ngFor='let item of todos'>{{ item.name }}</p> `, }) export class TodoComponent{ @Inpu

jQuery学习笔记[1] jQuery中的DOM操作

DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

COM组件中调用JavaScript函数详解及实例

COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

jQuery原理系列-常用Dom操作详解

1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

jQuery中的select操作详解

下面给大介绍了jquery对select的操作介绍,非常不错,具有内容介绍如下所示: select的html标签如下: <select class="xxx" id="yyy"><option></option>...<option></option></select> 1.设置value为"lll"的option选中 $('#yyy').val("lll"

jQuery 中DOM 操作详解

jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

MyBatis学习教程(五)-实现关联表查询方法详解

一.一对一关联  1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关系. CREATE TABLE teacher( t_id INT PRIMARY KEY AUTO_INCREMENT, t_name VARCHAR() ); CREATE TABLE class( c_id INT PRIMARY KEY AUTO_INCREMENT, c_name VAR

Vue.js中组件中的slot实例详解

Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

JSP学习之Java Web中的安全控制实例详解

本文实例讲述了JSP学习之Java Web中的安全控制.分享给大家供大家参考.具体如下: 一.目标: ① 掌握登录之后的一般处理过程: ② 能够为每个页面添加安全控制: ③ 能够共享验证代码: ④ 使用过滤器对权限进行验证: ⑤ 能够对文件的局部内容进行验证: ⑥ 掌握安全验证码的基本实现方式: ⑦ 通过异常处理增强安全性. 二.主要内容: ① 通过修改前面的登录功能,分别对管理员和普通用户的登录进行处理: ② 为管理员才能访问的页面添加控制: ③ 共享各个页面中的控制代码,使用专门的文件,然后