Was sind die Anwendungsszenarien von AngularJS? Einführung in Anwendungsszenarien von AngularJS

Dieser Artikel informiert Sie hauptsächlich über die Anwendungsszenarien von AngularJS. Ich hoffe, dass jeder ihn gemeinsam lesen kann >

Lassen Sie uns zunächst über die Anwendungsszenarien von AngularJS sprechen:

Das Arbeitsprinzip von AngularJS ist: Die HTML-Vorlage wird vom Browser in das DOM analysiert und die DOM-Struktur festgelegt wird zur Eingabe für den AngularJS-Compiler. AngularJS durchläuft die DOM-Vorlage, um entsprechende NG-Anweisungen zu generieren. Alle Anweisungen sind für das Festlegen der Datenbindung für die Ansicht (dh das ng-Modell in HTML) verantwortlich. Daher beginnt das NG-Framework erst zu funktionieren, nachdem das DOM geladen wurde. Es wird auf großen Browsern und großen Website-Projekten ausprobiert.

Lassen Sie uns nun über die Anwendungsszenarien von AngularJS sprechen:

Angular ist ein beliebtes Framework auf Unternehmensebene, das viele Programmierer zum Erstellen und Verwalten komplexer Webanwendungen verwenden. Angular erfreut sich großer Beliebtheit und wird von so vielen Unternehmen wie Domino’s Pizza verwendet: Ryanair, iTunes Connect, PayPal Checkout, Google. Angular ist ein Open-Source-Framework von Google. Angular bezeichnet sich selbst als Erweiterung von HTML zum Erstellen komplexer Webanwendungen. Wenn Sie auch mit TypeScript vertraut sind, können Sie einen Blick darauf werfen, wie man Angular 2 schreibt.

Angular übernimmt die MVC-Architektur. Es bietet eine doppelte Datenbindung zwischen der Modellebene und der Ansichtsebene. Der Vorteil dieser Datenbindungsmethode besteht darin, dass die Daten auf beiden Seiten automatisch aktualisiert werden, unabhängig davon, auf welcher Seite sich die Daten ändern. Dies hilft Ihnen beim Erstellen verbrauchbarer View-Komponenten. Es bietet außerdem ein Service-Framework für die einfache Interaktion zwischen Front-End- und Back-End-Services. Das Beste daran ist, dass es sich um einfaches JavaScript handelt.

Wann sollten Sie AngularJS verwenden? Wenn Sie eine komplexe Web-Frontend-Anwendung erstellen und ein einziges Modul-Framework benötigen, um alles zu bewältigen.

Einführung in die AngularJS-Anwendung:

Angular-Anwendung: Verwenden Sie HTML mit erweiterter Angular-Syntax zum Schreiben von Vorlagen, verwenden Sie Komponentenklassen zum Verwalten dieser Vorlagen und verwenden Sie Dienste zum Hinzufügen von Anwendungen Logik. Komponenten und Dienste werden in Modulen verpackt und veröffentlicht. Starten Sie die Anwendung, indem Sie das Root-Modul booten. Angular übernimmt und zeigt den Anwendungsinhalt im Browser an und reagiert auf Benutzerinteraktionen gemäß den von uns bereitgestellten Bedienungsanleitungen.

Diese Begriffe sind in der gesamten Angular-Anwendungsentwicklung sehr wichtig. (Wenn Sie mehr über AngularJS erfahren möchten, besuchen Sie die Spalte

AngularJS-Referenzhandbuch

auf der chinesischen PHP-Website)

Die 8 Hauptbausteine ​​von Angular-Anwendungen:

Module Module
Komponenten
Vorlagenvorlage
Metadaten Metadaten
Datenbindung Datenbindung
Richtlinie
Dienste Dienste
Abhängigkeitsinjektion

Winkelmodule:

Winkelanwendungen sind modular und verfügen über ein eigenes Modulsystem namens Winkelmodul /NgModules.

Was genau ist ein Modul? Was bedeutet Modularität im Winkel?

Eine Angular-Anwendung verfügt über mindestens ein Modul (Root-Modul) namens AppModule.

Die meisten Anwendungen verfügen über viele andere Funktionsmodule, die aus einer Reihe von Domänenklassen, Workflows oder eng verbundenen Funktionsaggregationen bestehen.

Alle Module in Angular sind eine Klasse mit dem @NgModule-Dekorator.

Die Module von Angular sind Klassen! ! !

Dekoratoren sind Funktionen, die zum Dekorieren von JavaScript-Klassen verwendet werden. Verantwortlich für das Anhängen von Metadaten an Klassen.

NgModule ist eine Dekoratorfunktion, die ein Metadatenobjekt empfängt, das Moduleigenschaften beschreibt. Die Attribute sind:
Deklarationen: Klassen anzeigen, die diesem Modul gehören. Angular verfügt über drei Ansichtsklassen: Komponenten, Direktiven und Pipelines.
Exporte: Eine Teilmenge von Deklarationen, die für Komponentenvorlagen in anderen Modulen verwendet werden können.
Importe: Die Klassen in der Komponentenvorlage dieses Moduls müssen von anderen Vorlagen exportiert werden.
Anbieter: der Ersteller des Dienstes. Dieses Modul fügt sie der globalen Servicetabelle hinzu, sodass von jedem Teil der Anwendung aus auf sie zugegriffen werden kann.
Bootstrap: identifiziert die Hauptansicht (Stammkomponente) der Anwendung. Nur das Root-Modul kann diese Eigenschaft festlegen.

Hier ist ein einfaches Root-Modul:

// 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 { }

Bootstrapping des Root-Moduls, um die Anwendung zu starten. Führen Sie das AppModule in der Datei main.ts aus:

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

Zu diesem Zeitpunkt verfügt das Projekt nur über die Datei app/app.module.ts und app/main.ts. Ersteres definiert das Stammmodul der Anwendung und letzterer verweist darauf, die Anwendung zu starten.

Okay, das war's für diesen Artikel über die Anwendungsszenarien und Anwendungen von AngularJS (wenn Sie mehr über AngularJS erfahren möchten, empfehle ich Ihnen, die Spalte

AngularJS-Lernhandbuch

im PHP-Chinesisch zu lesen). Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen. [Empfehlung der Redaktion]

Was sind die Unterschiede zwischen AngularJS und Vue? Vergleichsdetails zwischen AngularJS und Vue

Was sind die Vorteile von AngularJS? Hier sind die sieben Vorteile von AngularJS, die Sie kennen müssen

Das obige ist der detaillierte Inhalt vonWas sind die Anwendungsszenarien von AngularJS? Einführung in Anwendungsszenarien von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!