Detailed explanation of the architecture usage of Angular 4.0-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the use of the Angular 4.0 architecture. What are the precautions when using the Angular 4.0 architecture. The following is a practical case, let's take a look.

Preface

Some time ago, Google released version 4.0 of the popular Angular JavaScript framework. This version is committed to reducing the size of generated code and maintaining a simplified release plan for the framework.

It’s been a long time since I wrote something more conceptual like this, but I feel that without forming a knowledge structure, learning efficiency will be greatly reduced. Here I will share with you the knowledge I understand, and some of the content is quoted from official documents. Let’s go to the topic

Angular Architecture Overview

This architecture diagram shows the 8 main building blocks in an Angular application:

Module
Component
Template
Metadata
Data binding (data binding)
Directive (directive)
Service
Dependency injection (dependency injection)

Next, I will explain it in order and with pictures.

1. Module

New projects created by Angular or ionic will have a root module, and the default name is AppModule. If you use Modular to create an application, include AppModule, each will have a @NgModule decorator class (although it is very similar to java annotation in , but its official name is decorator). If our new page does not use lazy loading, it must be declared in @NgModule before use.

Here is an example to briefly introduce the content in @NgModule

//app.module.ts
import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
 imports:  [ BrowserModule ],
 providers: [ Logger ],
 declarations: [ AppComponent ],
 exports:  [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule { }

Copy after login

imports other modules where the classes required by the component template declared in this module are located.
providers The creator of the service and added to the global service list, which can be used in any part of the application.
declarations declares the view classes owned in this module. Angular has three view classes: components, directives, and pipes.
A subset of exports declarations that can be used in component templates of other modules.
bootstrap specifies the main view of the application (called the root component), which is the host for all other views. Only the root module can set the bootstrap attribute.

The meaning in the picture: Look at the upper left corner of the picture, the module is used to receive a metadata object that describes the module attributes.

2. Component, template, metadata

This time we will talk about these three points together. Let’s take a look at this code first

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

Copy after login

Component

A component is a decorator that accepts a configuration object, and Angular creates and displays the component and its views based on this information.

selector: A CSS selector that tells Angular to look for the tag in the parent HTML, create and insert the component.
templateUrl: The module relative address of the component HTML template. If you use template to write, use the "`" symbol to write HTML code directly.
providers: Dependency injection of services required by the component.

template

A template is that piece of HTML code. You can use templateUrl to introduce it from outside, or you can use template`` to write it directly.

metadata

Metadata decorators guide Angular's behavior in a similar way. For example, @Input, @Output, @Injectable, etc. are some of the most commonly used decorators, and their usage will not be expanded here.

What it means in the diagram: Look at the middle of the diagram. Templates, metadata, and components together describe the view.

3.Data binding

A total of four data bindings are shown here. Take a look at the sample code:

//插值表达式 显示组件的hero.name属性的值
<li>{{hero.name}}</li>
//属性绑定 把父组件selectedHero的值传到子组件的hero属性中
<hero-detail [hero]="selectedHero"></hero-detail>
//事件绑定 用户点击英雄的名字时调用组件的selectHero方法
<li (click)="selectHero(hero)"></li>
//双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值
<input [(ngModel)]="hero.name">

Copy after login

可能大家对各种括号看的眼花了，总结一下：

双花括号是单向绑定，传递的是值。方向是组件 -> 模板。
方括号是单向绑定，传递的是属性。方向是父组件 -> 子组件。
圆括号是事件绑定，处理点击等活动（action）。
方括号套圆括号是双向绑定，方向是组件 <-> 模板。

在图中的意义：看图中间那一块，数据绑定给模板和组件提供数据交互的方式。

4.指令 (directive)

严格来说组件就是一个指令，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。

我们这里提到的指令有两种类型：

结构型 structural 指令和属性 attribute 型指令。

放一下原文证明一下组件确实算是一个指令：

While a component is technically a directive, components are so distinctive and central to Angular applications that this architectural overview separates components from directives.

Two other kinds of directives exist: structural and attribute directives.

结构型指令是 ngFor、ngIf 这种的，通过在 DOM 中添加、移除和替换元素来修改布局。

属性型指令是 ngModel 这种的，用来修改一个现有元素的外观或行为。

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch ），或者修改 DOM 元素和组件的各个方面（例如 ngStyle 和 ngClass）。之后我会单独写一篇讲他们用法的文章。

在图中的意义：看图右上角那一块，组件是一个带模板的指令，只是扩展了一些面向模板的特性。

5.服务 (service)

官方文档的概念：

服务是一个广义范畴，包括：值、函数，或应用所需的特性。服务没有什么特别属于 Angular 的特性。Angular 对于服务也没有什么定义，它甚至都没有定义服务的基类，也没有地方注册一个服务。

这就像你在 iOS 或者 Android 里单独建了一个类叫 httpService ，封装了网络请求服务一样，不是具体的什么东西，就是一个概念了解下就行。

在图中的意义：看图左下角角那一块，服务是用来封装可重用的业务逻辑。

6.依赖注入 (dependency injection)

依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

比如我们要给某组件导入 HomeService 这个服务，看这段代码：

constructor(private service: HeroService) { 
 ...
}

Copy after login

这个constructor就是构造函数，依赖注入在 constructor 中进行。你也许会觉得前面写上 private、public 之类的很怪，这是 TypeScript 语法比较特殊，习惯就好。

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 injector。我们必须先用注入器 injector 为 HeroService 注册一个提供商 provider。

看一下下面的代码，意思就是我们必须在 providers 写上才能用

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

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！