Angular 2应用的8个主要构造块有哪些

前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo。后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了。的确,对于新手来讲,要了解一个框架还是比较麻烦的。所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来。

学习链接:中文官网

正文开始:

angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻辑,在模块中打包发布组件与服务。通过引导 根模块启动应用。 angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。

这几个名词很重要,贯穿angular应用开发。

angular 应用的 8个主要构造块:

模块modules
组件components
模板template
元数据metadata
数据绑定data binding
指令directive
服务services
依赖注入dependency injection

模块

angular 应用是模块化的,有自己的模块系统,叫做 angular 模块/NgModules。

到底模块是什么?在angular里模块化意味着什么?

angular 应用至少有一个模块(根模块),称为 AppModule。

大多数应用都有很多其它的 特性模块,它们由一组领域类、工作流、或紧密相关的功能聚合形成。

angular的所有模块都是一个带有 @NgModule 装饰器的类。

angular的模块是类!!!

装饰器是用来修饰JavaScript类的函数。负责把元数据附加到类上。

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

declarations(声明):本模块中拥有的视图类。angular 有三种视图类:组件、指令、管道。
exports:declarations的子集,可用于其它模块中的组件模板。
imports:本模块组件模板中需要由其他模板导出的类。
providers:服务的创建者。本模块把它们加入全局的服务表中,让他们在应用中的任何部分都可被访问到。
bootstrap:标识出应用的主视图(根组件)。只有根模块才可设置此属性。

下面是一个简单的根模块:

// app.module.ts
import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// @NgModle 装饰器函数,接受一个对象,对象有几个属性
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})

// AppComponent 的 export 语句导出,根模块不需要导出,其他组件不需导入根模块。
export class AppModule { }

引导根模块来启动应用。在 main.ts 文件中引导 AppModule:

// app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 从app.module 文件导入了 AppModule
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

此时,项目只有 app/app.module.ts 文件和 app/main.ts ,前者定义了应用的根模块,后者引用它来启动应用。

Angular 模块与JavaScript模块比较:

JavaScript的模块化是分文件导入的,各文件就是各模块。

Angular 模块(用 @NgModule 装饰的类)是Angular的基础特性。

JavaScript的模块系统管理一组JavaScript对象。

在JavaScript中,每个文件就是一个模块,该文件中定义的对象从属于该模块。通过 export 关键字,可以把它的某些对象声明为公开。别的模块可以使用 import 语句访问公开对象。

JavaScript的这个特性很有用。
export 关键字声明为公开,import 语句访问公开对象。

在 Angular 里这两种都会用到,从上面的两个个文件里,可以看到。

模块库

上面所说,Angular 用到了 JavaScript模块,所以它的JS模块就是库模块,JS文件库。

Angular 库的名字都以 @angular 前缀,可以使用 npm 包管理工具安装,并如上面的 import 语句可以访问它们中的对象。

这点很好理解,Angular 本来就是依托于JS实现的单页面框架,所以它本身还是需要丰富的JS库的。
比如,从 @angular/core 库导入 Component 装饰器:

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

使用JavaScript导入语句从Angular 库中导入 Angular 的某些模块。

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

在上面根模块的代码中,应用模块需要 BrowserModule 的某些素材,所以把它加入 @NgModule 元数据的 imports 中:

imports :[ BrowserModule ];

我们看看基本的@angular库中有哪些JS模块:

common
compiler
core
forms
http
platform-browser
platform-browser-dynamic
router
upgrade

所以,我们同时使用 Angular 和 JavaScript的模块化系统。

这块的 imports 和 exports 比较混乱,可以自己梳理下。

组件

组件负责控制屏幕上的一小块地方,就是视图。

在类中定义组件的应用逻辑(被用来为视图提供支持)。组件通过一些由属性和方法组成的API与视图交互。

所以说组件是联系视图的。

前面的 export 关键字可以把模块中的类声明为公开的,然后 import 里实现访问。

类里面有许多属性和方法。

模板

通过组件自带的模板来定义视图。模板是以HTML形式存在的,它告诉 Angular 如何渲染组件(视图)。

看一个组件文件的模板:

// app/hero-list.component.html
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
 <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
 </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

模板看起来就是标准 HTML,它里面有一些非标准HTML的语法。*ngFor、{{hero.name}}、{click}、[hero] 和 <hero-derail> ,它们是 Angular 的模板语法。

所以说,Angular 是通过这种方式来处理 HTML的。

元数据

元数据告诉Angular如何处理一个类。

之前 export 的类里有一些方法和属性,但是怎么处理这个类?

只要把元数据附加到这个类,就意味着这个类是个组件。

在 TypeScript 中,我们用装饰器(decorator)来附加元数据。

分析下面的元数据:

// app/hero-list.component.ts
@Component({
 moduleId: module.id,
 selector:  'hero-list',
 templateUrl: 'hero-list.component.html',
 providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component装饰器把紧随其后的类标记成了组件类。

在装饰器后面的类就会被转为组件类?

装饰器里的配置项:

moduleId:为与模块相关的URL提供基地址。
这个地址怎么使用的?
selector:CSS 选择器,它告诉 Angular 在父级HTML寻找一个标签,然后创建组件实例并插入标签中。
实现HTML的显示。
templateUrl:组件HTML模板的模块相对地址。
HTML模板的设置位置。
providers:数组,包含组件所依赖的服务所需要的依赖注入提供商。告诉Angular该组件的构造函数需要服务,组件可以从服务获取数据。
某些数据的传递通过服务进行,否则,其他的视图只能控制静态的展示。

@Component 里的元数据会告诉 Angular 如何取得你为组件设定的元数据。

模板、元数据和组件共同描绘出这个视图。

组件就是视图,模板提供HTML的结构性。

数据绑定

如果没有框架,那么一些都需要我们来做。把数据值推送到HTML控件,并把用户的反馈接收转换成动作和值更新显示,你可以使用jQuery来实现这个过程。

Angular 框架实现数据绑定,一种让模板各部分与组件的各部分相互联系的机制。在模板HTML中添加绑定标记,Angular 会连接模板和组件。

意味着,我们刻意自动实现视图数据的更新,因为它绑定了组件,可以实现数据的关联。

看一个示例:

// app/hero-list.component.ts

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

观察到在这个模板HTML里,有一些非标准HTML的字符。

{{hero.name}} 插值表达式:在元素中显示组件的 hero.name属性的值。
[hero] 属性绑定:把父组件的值传到子组件的 hero 属性中。
(click) 事件绑定:当用户点击元素时调用方法。

文件之间的互相关系需要梳理清楚。
双向数据绑定:同时实现属性绑定和事件绑定的功能。看示例:

// app/hero-detail.component.ts

<input [(ngModel)]="hero.name">

数据属性的值会从具有属性绑定的组件传到输入框,事件绑定使用户的修改被传回组件,把属性值设为最新的值。

指令

Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令对DOM进行修改。

就是说解析模板HTML的时候,会解析其中的指令。

指令是一个带有指令元数据的类。

指令是一个类,并且它含有指令源数据。

在TypeScript中,要通过 @Directive 装饰器把元数据附加到类上。

和之前的类的元数据一样,通过 @Component 装饰器把元数据附加到后面的类,编程组件类。这个就是通过 @Directive 装饰器把一些元数据附加到后面的指令类。

结构型指令:通过在DOM中添加、移除、替换元素修改布局。ngFor 、 ngIf。

属性指令:修改现有元素的外观或行为。ngModel

服务

服务分很多种,值、函数、应用所需的特性。

几乎任何东西都可以是一个服务。典型的服务是一个类。

例如:

日志服务
数据服务
消息总线
税款计算器
应用程序配置

组件是最大的服务消费者。

组件的一些操作需要服务提供一些数据。

示例,把日志记录显示到浏览器控制台:

// app/logger.service.ts

export class Logger {
 log(msg: any)  { console.log(msg); }
 error(msg: any) { console.error(msg); }
 warn(msg: any) { console.warn(msg); }
}

这些服务使得组件不用去服务器获取数据、进行验证……,这一切都可以通过服务完成。

组件的任务就是提供用户体验,仅此而已!

它介于视图(由模板渲染)和应用逻辑(包括模型)之间。

设计良好的组件为数据绑定提供属性和方法,对它们不重要的事情委托给服务。

依赖注入

依赖注入是提供类的新实例的一种方式,负责处理好类所需的全部依赖(服务)。

Angular 使用依赖注入提供我们需要的组件及组件所需的服务。

Angular 能通过查看构造函数的参数类型,来的值组件所需的服务。

示例:

// app/hero-list.component.ts

constructor(private service: HeroService) { }

构造函数的参数提到了一个服务。

当 Angular 创建组件时,会先为组件所需的服务找一个注入器(Injector)。

注入器是一个维护服务实例的容器,存放着以前创建的实例。如果容器中还没有所请求的服务实例,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。当所有服务都被解析完并返回, Angular 会以这些服务为参数去调用组件的构造函数,这就是依赖注入。

也就是说服务是先于组件被执行的。它先处理所有的服务到一个仓库,然后再处理组件,组件需要哪个服务就从仓库取出来给你。
提供商添加到根模块,在任何地方使用的都是服务的同一个实例:

// app/app.module.ts

providers: [
 BackendService,
 HeroService,
 Logger
],

提供商是确定处理组件之前必须存在所依赖的组件
也可以把它注册到组件层:

// app/hero-list.component.ts

@Component({
 moduleId: module.id,
 selector:  'hero-list',
 templateUrl: 'hero-list.component.html',
 providers: [ HeroService ]
})

添加到装饰器元数据的属性中。

依赖注入的要点:

1、依赖注入渗透在整个Angular框架中
2、注入器是机制的核心
      注入器负责维护一个容器,存放创建过的服务实例
      注入器能使用提供商创建一个新的服务实例
3、提供商是一个用于创建服务的配方。
4、把提供商注册到注入器。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Angular的8个主要构造块

    Angular 主要分为八大构造块(也就是八个核心概念):模块 (module).组件 (component).模板 (template).元数据 (metadata).数据绑定 (data binding).指令 (directive).服务 (service).依赖注入 (dependency injection).其中,最核心的一个概念就就组件. 1. 模块 (module) Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块或 NgMo

  • Angular 2应用的8个主要构造块有哪些

    前面的话:最近空余时间在学 Angular 2,国庆节的时候看了官网的quickstart,还写了一篇文章,只是一个hello world demo.后面继续看了它的一个项目教程,刚开始还可以跟上,当后面就比较混乱了.的确,对于新手来讲,要了解一个框架还是比较麻烦的.所以停止项目,开始看看 angular 的整体框架是如何的,联系项目,分析下,慢慢来. 学习链接:中文官网 正文开始: angular 应用:用带 angular 拓展语法的 HTML 写模板,用组件类管理这些模板,用服务添加应用逻

  • Java浅析代码块与构造块及静态块三者之间的关系

    目录 普通代码块(本地代码块) 构造块(实例代码块) 静态块(静态代码块) 他们之间有什么关系呢 例子 分析 普通代码块(本地代码块) 定义在方法里面用{ }括起来的代码块(凡是用{ }括起来都叫代码块,只是没有细分),就是普通代码块,也叫本地代码块.(不多见,也不常用) 例如: public class Test { public static void main(String[] args){ { System.out.println("本地代码块!"); } } } 构造块(实例

  • Java 中普通代码块,构造代码块,静态代码块区别及代码示例

    Java中普通代码块,构造代码块,静态代码块区别及代码示例 //执行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 其中静态代码块只执行一次.构造代码块在每次创建对象是都会执行. 1 普通代码块 //普通代码块:在方法或语句中出现的{}就称为普通代码块.普通代码块和一般的语句执行顺序由他们在代码中出现的次序决定--"先出现先执行" public class CodeBlock01{ public static void main(Strin

  • Java重载构造原理与用法详解

    本文实例讲述了Java重载构造原理与用法.分享给大家供大家参考,具体如下: 带参数方法 [1]无参数,无返回值 void 方法名(){方法体:} [2]无参数,有返回值 int 方法名(){方法体:} [3]有参数,无返回值 void 方法名(int num){方法体:} [4]有参数,有返回值 int 方法名(int num){方法体:} 可变参数与数组参数的区别 [1]可变参数传参灵活,,可以无参,可以多个参数,可以数组:   数组参数只能传递数组 [2]可变参数必须放在最后   数组可以放

  • Angular框架详解之视图抽象定义

    前言 作为"为大型前端项目"而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理.本文主要围绕 Angular 中与视图有关的一些定义进行介绍. Angular 中的视图抽象 Angular 版本可在不同的平台上运行:在浏览器中.在移动平台上或在 Web Worker 中.因此,需要特定级别的抽象来介于平台特定的 API 和框架接口之间. Angular 中通过抽象封装了不同平台的差异,并以下列引用类型的形式出现:ElementR

  • 深入介绍Java对象初始化

    前言 在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一点是Java规范规定的. 自动初始化(默认值) 一个类的所有基本数据成员都会得到初始化,运行下面的例子可以查看这些默认值: class Default{ boolean t; char c; byte b; short s; int i; long l; float f; double d; public void show() { System.out.println("基本类型 初始化值\n"+ "bo

  • 详解java中的四种代码块

    在java中用{}括起来的称为代码块,代码块可分为以下四种: 一.简介 1.普通代码块: 类中方法的方法体 2.构造代码块: 构造块会在创建对象时被调用,每次创建时都会被调用,优先于类构造函数执行. 3.静态代码块: 用static{}包裹起来的代码片段,只会执行一次.静态代码块优先于构造块执行. 4.同步代码块: 使用synchronized(){}包裹起来的代码块,在多线程环境下,对共享数据的读写操作是需要互斥进行的,否则会导致数据的不一致性.同步代码块需要写在方法中. 二.静态代码块和构造

  • 浅析java中static的用法

    static的作用: 1.将对象层级提升为类层级 (即将对象可以调用的,提升为对象和类均可调用的成员):            //推荐使用类来调用   ClassNme.静态成员 (包括变量.方法.成员对象) 2.static修饰的成员,在类加载时即准备完成,而不需要创建对象:   //类加载只做一次: 类名 的时候会类加载; new 对象时会类加载 3.静态成员方法只能访问静态成员,不能访问非静态成员(因为调用该方法时可能还没有创建对象):    而非静态成员方法既能访问非静态成员,又能访问

  • Python基础知识点 初识Python.md

    Python简介 Python的历史 1989年圣诞节:Guido von Rossum开始写Python语言的编译器. 1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语言实现的(后面又出现了Java和C#实现的版本Jython和IronPython,以及PyPy.Brython.Pyston等其他实现),可以调用C语言的库函数.在最早的版本中,Python已经提供了对"类","函数","异常处理"等构造块的支持,同时提

随机推荐