大佬教程收集整理的这篇文章主要介绍了Angular 5.x 系列教程笔记(二)——架构分析,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Angular 2.x 4.x 5.x 的逐个版本,遵循了模块化的思想,架构以及应用,相对于1.x的版本有了很大的改进,从项目中的使用来看,有很大的提升,今天我们就来看一下Angular 5.x架构的精髓所在。
Angular整体来讲我们主要会学习到八个主要的构造块,分别为模块,组件,模板,元数据,数据绑定,指令,服务,依赖注入,下面逐个来解释一下:
对于模块而言,整个应用至少存在一个根模块,模块是以@NgModule装饰器的一个类,比如如下代码:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { Heroservice } from './hero.service';
import { AppRoutIngModule } from './app-routIng.module';
@NgModule({
imports: [
BrowserModule,FormsModule,AppRoutIngModule
],declarations: [
AppComponent,DashboardComponent,HeroDetailComponent,HeroesComponent
],providers: [ Heroservice ],bootstrap: [ AppComponent ]
})
export class AppModule { }
于此同时,Angular 提供了一组 JavaScript 模块, 我们可以把它们看做库模块,并且每个 Angular 库的名字都带有@angular前缀,使用起来也比较方便,更加直观。
组件就是定义的一个通用类,通过一些由属性和方法组成的 API 控制部分可以重用的视图,例如下代码:
export class HeroListComponent implements OnInit {
heroes: Hero[];
SELEctedHero: Hero;
constructor(private service: HeroservicE) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
SELEctHero(hero: Hero) { this.SELEctedHero = hero; }
}
Angular中模板以 HTML 形式存在,目的是告诉 Angular 如何渲染组件,如果编写过HTML,CSS, 处理这个模块相当容易,除了普通的html属性之外,还有一些特殊的属性,比如使用其它元素。 例如,像*ngFor、{{hero.namE}}、(click)、[hero]等, 都是Angular特有的属性,只有Angular框架可以识别。
<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> <app-hero-detail *ngIf="SELEctedHero" [hero]="SELEctedHero"></app-hero-detail>
所谓的元数据,元数据告诉 Angular 如何处理一个类,常用的有@Component,其里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
@Component({ SELEctor: 'my-app',template: ` <h1>{{title}}</h1> <nav> <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a> </nav> <router-outlet></router-outlet> `,styleUrls: ['./app.component.css'],})
用过Angular 1.x的同学,一定清晰的记得,Angular1.x 包括,双向数据绑定,单向数据绑定,还有一次性数据绑定。
那么在Angular 2.x + 中,主要有以下几种形式:
<li>{{hero.name}}</li> <app-hero-detail [hero]="SELEctedHero"></app-hero-detail> <li (click)="SELEctHero(hero)"></li> <input [(ngModel)]="hero.name">
在官方网站学习过程中,我们看到以上几种方式,尤为注意的在双向数据绑定中,使用Ngmodel,需要额外引入模块
import { FormsModule } from '@angular/forms';
指令这个概念在1.x 版本尤为突出,也是1.x版本的一个重大的亮点和优势,在2.x + 的版本中,组件其实就是一个带模板的指令;
@Component装饰器实际上就是一个@Directive装饰器,只是扩展了一些面向模板的特性而已。
服务即为service,Factory,哈哈这是1.x的概念, 其实组件类应保持精简,而且组件本身不从服务器获得数据、不进行验证输入,也不直接往控制台写日志。那么这一切改如何处理呢, 它们把这些任务委托给服务。在2.x 中,我们使用ts定义服务,并且注入,使用更为方便,如下就是我们练习缩写的Heroservice:
export class Heroservice {
private heroes: Hero[] = [];
constructor(
private BACkend: BACkendservice,private logger: Logger) { }
getHeroes() {
this.BACkend.getAll(Hero).then( (heroes: Hero[]) => { this.logger.log(`Fetched ${heroes.length} heroes.`); this.heroes.push(...heroes); // fill cache }); return this.heroes; } }
依赖注入不是什么新鲜的概念,如果学过Java 三大框架,一定会有所了解Spring的应用原理,但是JS框架中,这是一个比较新的尝试, 其中angular 使用依赖注入来提供新组件以及组件所需的服务。
import { Injectable } from '@angular/core';
@Injectable()
export class Heroservice {
}
Angular 通过查看构造函数的参数类型得知组件需要哪些服务,当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。
constructor(private service: HeroservicE) { }
以上是大佬教程为你收集整理的Angular 5.x 系列教程笔记(二)——架构分析全部内容,希望文章能够帮你解决Angular 5.x 系列教程笔记(二)——架构分析所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。