开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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() {

  }

 

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
java学习第三天笔记-java基础概念11-java34
java学习第三天笔记-java基础概念11-java34
3 0
java学习第三天笔记-java基础概念11-小练习35
java学习第三天笔记-java基础概念11-小练习35
3 0
java学习第二天笔记-java基础概念06-计算公交车司机的人数24
java学习第二天笔记-java基础概念06-计算公交车司机的人数24
3 0
Java学习路线 (从零基础到项目完整2019版!)
前言:如果想要入坑,请看完下面这段话!
23 0
零基础入门系列
简介: 为了让宝贵的经验传播,方便大家快速上手 Flink,小编将零基础入门系列整理成合集供大家下载,学习和使用。
6580 0
Redis探寻(第二话)零基础理解Redis持久化机制
写在前面:        开这个系列是希望随着自己的学习成长尝试总结一些容易有坑或理解上可能有一定难度的课题,期许其他有兴趣的同学阅读能够直观的理解并快速掌握;所以本系列主要目标读者为Redis入门或非技术同学,其他资深同学如已有一定理解,可以直接略过;该系列中任何讲解不当之处欢迎指正。 Redis本身作为一个内存KV Store,本篇暂不探讨其性能如何强
623 0
【JAVA零基础入门系列】Day4 变量与常量
  【JAVA零基础入门系列】(已完结)导航目录 Day1 开发环境搭建 Day2 Java集成开发环境IDEA Day3 Java基本数据类型 Day4 变量与常量 Day5 Java中的运算符 Day6 Java字符串 Day7 Java输入与输出 Day8 Java的控制流程 Day9 Java中的那个大数值 Day10 Java中的数组 Day11 Java中的类和对象 Day12 Java类的简单应用 Day13 Java类的继承与多态 Day14 Java对象的克隆 Day15 对象的比较   这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量。
919 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载