Angular从零到一1.5 一些基础概念-阿里云开发者社区

开发者社区> 华章出版社> 正文

Angular从零到一1.5 一些基础概念

简介:

1.5 一些基础概念


有了前面的例子,就可以粗略介绍一些Angular的基础概念了,这些基础概念在后面的章节中会更详细地讲解。

1.5.1 元数据和装饰器

Angular中大量地使用了元数据。元数据是什么呢?元数据的定义是这样的:元数据是用来描述数据的数据。

天啊,这什么意思啊?没关系,我们来看一个例子,大家都在电脑上有文件浏览器,随便选择一个文件,我们可以右键选择这个文件的属性看一下,如图 1.6所示。

我们看到文件本身其实就是一个二进制格式的数据,而在文件的属性中我们又发现了对此数据的描述,包括:文件的种类、文件的大小、文件的位置、创建时间、修改时间等通用信息,也发现了如打开方式的描述、权限的描述等信息。这就是文件的元数据。

 

图1.6 文件的元数据描述

那么在编程语言的世界中,如何表示这种元数据呢?每种编程语言都有自己的选择,但Angular 2的元数据表示方法和Java、Python等编程语言中的元数据表示法很类似。那就是以 @ 这个符号定义一个对象表示后面的数据是一个元数据,这个元数据一般修饰紧挨着它的那个对象或变量。

比如我们之前改过一段代码,@Component(…) 中描述的就是LoginComponent的元数据,这段元数据告诉我们LoginComponent的一些属性,比如它对外部的选择器名称(也就是标签)应该叫做 app-login ,它的模板是什么样子,样式是什么样子,等等。我们一般管 @Component 叫做组件的装饰器,它的作用就是表示清楚元数据,代码如下所示:

@Component({

  selector: 'app-login',

  template: '

    <p>

      login Works!

    </p>

  ',

  styles: []

})

export class LoginComponent implements OnInit {

 

  constructor() { }

 

  ngOnInit() {

  }

 

}

1.5.2 模块

简单来说,模块就是提供相对独立功能的功能块,每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的,比如FormsModule封装了表单处理,HttpModule封装了HTTP的处理,等等。

Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。 它指出模块拥有的组件、指令和管道, 并把它们的一部分公开出去,以便外部组件使用它们。 它可以向应用的依赖注入器中添加服务提供商。(依赖性注入和服务的概念我们在稍后的章节中讲解,此处暂时略过。)

NgModule是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:

declarations:声明本模块中拥有的视图类。 Angular 有三种视图类:组件、指令和管道。

exports:declarations 的子集,可用于其他模块的组件模板。

imports:本模块声明的组件模板需要的类所在的其他模块。

providers:服务的创建者,并加入到全局服务列表中,可用于应用任何部分。

bootstrap:指定应用的主视图(称为根组件),它是所有其他视图的宿主。只有根模块才能设置bootstrap属性。

每个Angular应用至少有一个模块类——习惯上叫它“根模块”,我们将通过引导根模块来启动应用。根模块在一些小型应用中可能是唯一,但大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。按照约定,根模块的类名叫做AppModule,放在 app.module.ts 文件中。我们这个例子中的根模块位于 hello-angular\src\app\app.module.ts,代码如下:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

 

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

 

@NgModule({

  declarations: [

    AppComponent,

    LoginComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    HttpModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

@NgModule装饰器用来为模块定义元数据。declarations列出了应用中的顶层组件,包括引导性组件AppComponent和我们刚刚创建的LoginComponent。在module里面声明的组件在module范围内都可以直接使用,也就是说在同一module里面的任何Component都可以在其模板文件中直接使用声明的组件,就像我们在AppComponent的模板末尾加上 <app-login></app-login> 一样。

imports引入了三个辅助模块:

BrowserModule提供了运行在浏览器中的应用所需要的关键服务(Service)和指令(Directive),这个模块对于所有需要在浏览器中跑的应用来说都必须引用。

FormsModule提供了表单处理和双向绑定等服务和指令。

HttpModule提供HTTP请求和响应的服务。

providers列出会在此模块中“注入”的服务(Service),关于依赖性注入会在后面章节中详细解释。

bootstrap指明哪个组件为引导性组件(本案例中的AppComponent)。当Angular引导应用时,它会在DOM中渲染这个引导性组件,并把结果放进index.html的该组件的元素标签中(本案例中的app-root)。

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>HelloAngular</title>

  <base href="/">

 

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

  <app-root>Loading...</app-root>

</body>

</html>

1.5.3 组件

组件负责控制屏幕上的一小块区域(称为“视图”,也就是我们的组件模板显示在屏幕上的那块区域)。我们在类中定义组件的应用逻辑,为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。

以我们刚才介绍的组件代码为例,如果我们在LoginComponent中定义一个变量 text,在模板中引用这个变量,那么屏幕上组件对应的显示就会变成Hello LoginComponent,这就是一个组件的类是如何与视图进行简单交互的过程:

import { Component, OnInit } from '@angular/core';

 

//@Component是Angular提供的装饰器函数,用来描述Compoent的元数据

//其中selector是指这个组件的在HTML模板中的标签是什么

//template是嵌入(inline)的HTML模板,如果使用单独文件可用templateUrl

//styles是嵌入(inline)的CSS样式,如果使用单独文件可用styleUrls

@Component({

  selector: 'app-login',

  template: '

    <p>

      {{text}}

    </p>

  ',

  styles: []

})

export class LoginComponent implements OnInit {

  text = ‘Hello LoginComponent’

  constructor() { }

 

  ngOnInit() {

  }

 

}

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接