이 기사는 Angular11에 대한 심층적인 이해를 제공합니다.-JS 튜토리얼-php.cn

이 글에서는 Angular11을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

이 기사는 Angular11에 대한 심층적인 이해를 제공합니다.

Angular는 버전 1.0에서 2.0으로의 개발 도약을 경험했습니다. 강력한 도구인 TypeScript와 결합하여 Angular는 대규모 프런트 엔드에 중요한 옵션이 되고 있습니다. 이 질문은 주로 Anguar의 기본 개념을 소개합니다. 10, 해당 코드를 통해 독자가 빠르게 시작할 수 있도록 도와줍니다. [관련 추천: "angular Tutorial"]

1. Angular Development Milestone

AngularJS는 원래 Misko Hevery와 Adam Abrons가 2009년 여가 시간에 개발한 개인 프로젝트였습니다. 원래 프로젝트 이름은 GetAngular였습니다. 디자인 목표는 웹 디자이너(비개발자)가 HTML 태그만 사용하여 간단한 애플리케이션을 만들 수 있도록 하는 것입니다. 시간이 지나면서 AngularJS는 포괄적인 개발 프레임워크로 발전했습니다. 2010년에 Google Feedback의 개발 속도와 프로젝트 진행을 촉진하기 위해 Misko Hevery는 GWT를 기반으로 Google Feedbac을 재구성하여 원래 17,000줄이 넘는 코드를 1,500줄 이상으로 압축했습니다. 주목을 받았고 AngularJS는 Google 회사 프로젝트로 변신했습니다.

Angular1.0에는 양방향 데이터 바인딩 개념이 도입되었습니다. 2016년에는 마이크로소프트와 구글이 협력해 TypeScript를 새로운 개발 언어로 채택하고 Angular 2.0을 출시했습니다. Angular2.0과 Angularjs1.x는 완전히 다른 아키텍처입니다. Angular2.0 이상 버전은 총칭하여 Angular2+라고 합니다. Angular1.x의 사용자 그룹도 상대적으로 크며 해당 버전 프레임워크는 계속해서 최신 버전인 1.8.2로 유지됩니다. Angular2+의 최신 버전은 11.0.0입니다.

이 기사는 Angular11에 대한 심층적인 이해를 제공합니다.

2. 개발 개요

2.1 양방향 데이터 바인딩

기존 프런트엔드 개발에서는 데이터와 뷰가 단일 바인딩을 통해 연결되는 경우가 많습니다. 이 모델의 장점은 결과가 상대적으로 간단하다는 점입니다. 모델은 템플릿과 결합된 데이터 업데이트 및 렌더링을 담당하고, 뷰 레이어는 표시만 담당합니다. 이 구조의 단점은 뷰 레이어의 데이터 변경 사항을 모델 레이어에 피드백할 수 없어 대화형 페이지의 요구 사항을 충족할 수 없다는 것입니다. 이때 양방향 데이터 바인딩이 시작됩니다.


그림 1 단방향 데이터 바인딩	그림 2 양방향 데이터 바인딩

2.2 핵심 기능 변경

Angularjs 양방향 바인딩 방법 - 더티 체크:

watch = {
    /**  当前的watch对象观测的数据名  **/
    name: ‘’,
    /** 得到新值 **/    
   getNewValue: function($scope) {
       ...
        return newValue;
    },
    /**  当数据发生改变时需要执行的操作  **/
    listener: function(newValue, oldValue) {
        ...
    }
}

로그인 후 복사

모든 기본 이벤트는 더티 체크를 트리거하지 않습니다. s<code>scope.applyc
o

적용< / code>Angular에게 UI 업데이트를 알립니다.

function patchThen(Ctor: Function) {
      ...
      const originalThen = proto.then;
      proto[symbolThen] = originalThen;
      Ctor.prototype.then = function(onResolve: any, onReject: any) {
      		const wrapped = new ZoneAwarePromise((resolve, reject) => {
      			originalThen.call(this, resolve, reject);
      		});
      		return wrapped.then(onResolve, onReject);
      };
      ...
}

로그인 후 복사

Zone.js는 Angular2+에 포함되어 있습니다. 기본적으로 사용할 수 있으며 setTimeout, addEventListener, promise 등은 모두 ngZone에서 실행됩니다. Angular는 ngZone에 해당 후크를 설정하고 해당 더티 검사 처리를 수행하도록angular2에 알리고 DOM을 업데이트합니다.

Data Binding(데이터 바인딩)Directive(명령) 3.1 모듈 )

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

로그인 후 복사

컴포넌트는 화면에서 뷰라고 불리는 작은 영역을 제어합니다컴포넌트의 애플리케이션 로직은 클래스(주로 뷰를 지원하는 데 사용됨)에 정의되어 있습니다. 클래스와 뷰는 속성과 메서드의 API를 통해 상호 작용합니다.

라이프 사이클 후크를 통해 구성 요소의 생성, 업데이트 및 삭제를 수행합니다.

// src/app/hero-list.component.ts (class)
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; }
}

로그인 후 복사

// src/app/hero-list.component.html
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

로그인 후 복사

은 Angular에게 양식에서 렌더링하는 방법을 알려줍니다. Angular 명령(NgClass, NgStyle, NgIf, NgFor...)이 포함된 HTML 구성 요소 HTML

사용자 정의 구성 요소

// src/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>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

로그인 후 복사

메타데이터는 Angular의 클래스가 컴포넌트 TypeScript로 메타데이터를 첨부하는 간단한 방법은 데코레이터를 사용하는 것입니다

@Component 함수를 사용하여 구성 객체를 승인하고 이를 메타데이터로 변환합니다.

템플릿, 메타데이터 및 컴포넌트가 뷰를 함께 제어합니다
일반적으로 사용되는 데코레이터: @Injectable @Input @Output @RouterConfig

// src/app/hero-list.component.ts (metadata)

@Component({
 selector:    &#39;app-hero-list&#39;,
 templateUrl: &#39;./hero-list.component.html&#39;,
 providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

로그인 후 복사

데이터 값을 HTML 컨트롤에 푸시하고 사용자의 응답을 작업으로 변환하고 값 업데이트로 변환템플릿과 상위-하위 구성 요소 간 통신

속성 바인딩 및 이벤트 바인딩템플릿 중첩

여러 형태의 양방향 바인딩

// src/app/hero-list.component.html (binding)

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

로그인 후 복사

3.6 Directive（指令）

带有@Directive() 装饰器的类，指示对DOM进行转换
结构型指令和属性型指令
结构型指令：通过添加、移除或者替换DOM元素来修改布局

// src/app/hero-list.component.html (structural)

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

로그인 후 복사

属性型指令：修改现有元素的外观或行为

// src/app/hero-detail.component.html (ngModel)

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

로그인 후 복사

3.7 Service（服务）

广义：包括应用所需的任何值、函数或特性，狭义：明确定义了用途的类
@Injectable() 装饰器来提供元数据

// src/app/logger.service.ts (class)

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

로그인 후 복사

// src/app/hero.service.ts (class)

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;
 }
}

로그인 후 복사

3.8 Dependency Injection（依赖注入）

为一个类的实例提供全部依赖的方法，大部分依赖是服务
全应用级别注入器机制
注入前必须注册一个提供者（Provider），然后返回服务类本身
全局注册

@Injectable({
   providedIn: &#39;root&#39;,
})

로그인 후 복사

特定注册

@NgModule({
   providers: [
      BackendService,
      Logger
    ],
    ...
})

로그인 후 복사

注入

// src/app/hero-list.component.ts (component providers)

@Component({
   selector:    &#39;app-hero-list&#39;,
   templateUrl: &#39;./hero-list.component.html&#39;,
   providers:  [ HeroService ]
})

로그인 후 복사

四、创建第一Angular项目

4.1 基于Angular CLI

安装Node.js 的当前版、活跃 LTS 版或维护期 LTS版
安装Angular CLI

npm install -g @angular/cli

로그인 후 복사

创作工作空间和初始应用

npm new my-app

로그인 후 복사

运行应用

cd my-app
ng server --open

로그인 후 복사

4.2 基于Angular Quickstart

克隆Quickstart项目

git clone https://github.com/angular/quickstart.git my-app

로그인 후 복사

进入项目并安装依赖

cd ./my-app
npm run install

로그인 후 복사

启动项目

npm start

로그인 후 복사

五、对比VUE

5.1 技术对比

主要点	Angular	VUE
设计目标	全面的解决方案（浏览器端、服务端、客户端），基本包含了开发全流程	渐进增强，扩展性强，用户选择余地大
组件	组件是ng2+应用核心，支持Web Component标准，组件生命周期明确	完善的组件系统，可以从template生成或者render渲染，组件有明确的生命周期，使用virtual dom渲染
异步处理	原生支持RxJS，通过流模型处理异步任务	没有官方异步处理方案，可以用Promise，也可以用RxJS染
构建部署	支持Just In Time（JIT）和Ahead Of Time（AOT）模式，配合tree shaking可以大幅减少代码体积	配合Webpack打包工具，在不引入组件的情况下，体积更小
状态管理	ngrx	vuex
安全	对不信值进行编码，避免XSS攻击，使用离线模版编译器，防止模版注入。官方http库防止XSRF	没有强制性阻止XSS攻击机制，输出HTML要注意配合v-html指令
优点	框架对几乎任何场景，都提供了标准化，更工程化，更适合大型项目多人协作面向新特性，发展空间大	框架可被不同程度的使用，可单独使用核心，也可加入状态管理，提供了更多选项。适合初期快速迭代，性能上没有很大缺陷
缺点	使用大量第三方库和组件，增加了潜在风险，应用性能可控性降低	由于提供了开发选项，多人协作下，对与使用程度和场景的处理可能不一样，随着项目增大，以快为特点的技术，在工程化和代码管理上可能存在困难。需要程序员手动实现类似依赖注入的功能、代码组织
选型	业务要求稳定、能够增量开发的项目	快速迭代、可以被替换的项目

5.2 开源组件库资源对比

Angular	Vue
Angular Material2	Element UI
DEVUI	Mint UI
PrimeNg	iView UI
Kendo UI	Bootstrap-Vue UI
Ng-lightning	Ant Design Vue UI
Ng-bootstrap	AT-UI UI
NG-ZORRO	cube-ui UI
NGX Bootstrap	Muse-UI UI