Web-Frontend
js-Tutorial
Drei Hauptmodule von AngularJS-Studiennotizen (Modal, Controller, View)_AngularJS
Drei Hauptmodule von AngularJS-Studiennotizen (Modal, Controller, View)_AngularJS
Heute werde ich Ihnen hauptsächlich die drei Hauptmodule von AngularJS im Detail erklären: Modal, Controller und View.
Lassen Sie mich zunächst etwas über die Beziehung zwischen diesen drei Modulen erzählen.
1. Das Datenmodell (modal) stellt hauptsächlich Daten bereit. Es interagiert nicht direkt mit Ansichten.
2. Der Controller speichert die vom Modal bereitgestellten Daten und arbeitet mit der Ansicht.
3.view ist die Ansicht, also die Seitenanzeige.
4. Kurz gesagt, der Controller ist für die Kommunikation zwischen Daten und Ansichten verantwortlich und stellt die Schnittstelle zwischen beiden dar. Ihre Arbeitsteilung ist klar und die Modularisierung wird erreicht.
1. Wie verwende ich das Datenmodell (modal)?
Apropos Datenmodelle: Schauen wir uns das Beispiel aus dem vorherigen Tutorial an:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
<script src="controll.js"></script> //引入控制器
</head>
<body>
<div ng-controller="controller">
<input type="text" ng-model="text">
<b>{{greeting.text}} {{text}}</b>
</div>
</body>
</html>
1. Führen Sie zunächst das AngularJS-Paket ein und suchen Sie zunächst nach der NG-App-Direktive, die den gesamten Umfang angibt
2. Anschließend suchen Sie weiter nach konkreten Anweisungen. Hier finden Sie ng-model, das ein „Text“-Datenmodell definiert.3. Im Folgenden wird das Textmodell verwendet, sodass eine bidirektionale Bindung erreicht wird. (Solange es im Rahmen von ng-app liegt, kann Text direkt verwendet werden)
2. Wie verwende ich den Controller?
Lassen Sie uns zunächst über einige wichtige Punkte bei der Verwendung des Controllers sprechen:1. Verwenden Sie keine Controller für Ansichten. Ein Controller ist im Allgemeinen nur für einen kleinen Satz von Ansichten verantwortlich (Eins-zu-Eins-Korrespondenz).
2. Betreiben Sie das DOM nicht direkt im Controller. Um das DOM zu bedienen, verwenden Sie den Direktivenbefehl (siehe vorheriges Tutorial).
3. Führen Sie keine Datenfilterungsvorgänge im Controller durch. Es gibt einen speziellen Filterdienst, um dies zu implementieren4. Im Allgemeinen rufen sich verschiedene Controller nicht gegenseitig an, und die Interaktion zwischen Controllern erfolgt im Allgemeinen über Ereignisse.
Dann schauen wir uns den blauen Teil des Codes oben an. Der Inhalt von control.js ist:
Angularjs findet eine NG-Controller-Anweisung und dann den Ort, an dem diese Anweisung definiert ist, nämlich die Datei control.js, und dann können Sie Greeting.text verwenden, um ihren Wert direkt abzurufen.
function controller($scope){
$scope.greeting = {
text : 'hello'
};
}
Wenn es um die Verwendung von Ansichten geht, müssen Anweisungen erwähnt werden. (Das ist neues Wissen!!!) Schauen wir uns einen Code an:
Der obige Code definiert ein Befehls-Tag. Sie können
var appModule = angular.module('app', []); //app是html中ng-app指令的名称
appModule.directive('hello', function() { //定义一个指令，名称叫hello
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};
});
1.restrict: (String) optionaler Parameter, der angibt, in welcher Form die Anweisung im DOM deklariert wird. Die Werte sind: E (Element), A (Attribut), C (Klasse), M (Kommentar); das obige Beispiel ist auf Elementform eingestellt (
3.templateUrl: Wie oben, Rückgabe von Inhalten über die URL. Wenn viele Inhalte zurückgegeben werden, wird empfohlen, dieses Attribut zu verwenden.
4.relace: (Boolescher Wert), der Standardwert ist false. Das obige Beispiel ist auf „true“ gesetzt: Die Seite wird durch das zurückgegebene div ersetzt, nachdem das Hallo-Tag verwendet wurde.
5.transclude: (Boolescher Wert), wenn auf true gesetzt. Diese Konfigurationsoption ermöglicht es uns, den im Element der Direktive enthaltenen Inhalt zu extrahieren und ihn an einer bestimmten Stelle in der Direktivenvorlage zu platzieren, die mit ng-transclude verwendet wird.
6. Es gibt auch einige andere Attribute. Später erfahren wir mehr darüber. . .
Okay, oben sind die Anweisungen zur Verwendung dieser drei Hauptmodule. Ich hoffe, dass es für das Studium aller hilfreich sein wird. . . Wenn Sie etwas zu den obigen Anmerkungen nicht verstehen, fragen Sie mich einfach und ich werde es Ihnen auf jeden Fall beantworten. Ich wünsche euch allen ein glückliches Leben!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1387
52
Die neuesten 5 AngularJS-Tutorials im Jahr 2022, vom Einstieg bis zur Beherrschung
Jun 15, 2017 pm 05:50 PM
Javascript ist eine sehr einzigartige Sprache, was die Organisation des Codes, das Programmierparadigma des Codes und die objektorientierte Theorie betrifft. Die Frage, ob Javascript eine objektorientierte Sprache ist, wird seit langem diskutiert Es gibt offensichtlich schon seit langem eine Antwort. Auch wenn Javascript seit zwanzig Jahren vorherrscht, schauen Sie sich einfach das „Black Horse Cloud Classroom JavaScript Advanced Framework“ an, wenn Sie beliebte Frameworks wie jQuery, Angularjs und sogar React verstehen möchten Design-Video-Tutorial“.
Verwenden Sie PHP und AngularJS, um eine reaktionsfähige Website zu erstellen und ein hochwertiges Benutzererlebnis zu bieten
Jun 27, 2023 pm 07:37 PM
Im heutigen Informationszeitalter sind Websites zu einem wichtigen Instrument für Menschen geworden, um Informationen zu erhalten und zu kommunizieren. Eine responsive Website kann sich an verschiedene Geräte anpassen und den Benutzern ein qualitativ hochwertiges Erlebnis bieten, was zu einem Hotspot in der modernen Website-Entwicklung geworden ist. In diesem Artikel erfahren Sie, wie Sie mit PHP und AngularJS eine responsive Website erstellen, um ein qualitativ hochwertiges Benutzererlebnis zu bieten. Einführung in PHP PHP ist eine serverseitige Open-Source-Programmiersprache, die sich ideal für die Webentwicklung eignet. PHP bietet viele Vorteile, z. B. einfache Erlernbarkeit, plattformübergreifende Funktionalität, umfangreiche Toolbibliothek und Entwicklungseffizienz
Erstellen Sie Webanwendungen mit PHP und AngularJS
May 27, 2023 pm 08:10 PM
Mit der kontinuierlichen Entwicklung des Internets sind Webanwendungen zu einem wichtigen Bestandteil des Informationsaufbaus in Unternehmen und zu einem notwendigen Mittel für Modernisierungsarbeiten geworden. Um die Entwicklung, Wartung und Erweiterung von Webanwendungen zu vereinfachen, müssen Entwickler ein technisches Framework und eine Programmiersprache wählen, die ihren Entwicklungsanforderungen entspricht. PHP und AngularJS sind zwei sehr beliebte Webentwicklungstechnologien. Sie sind serverseitige bzw. clientseitige Lösungen und können die Entwicklungseffizienz und das Benutzererlebnis von Webanwendungen erheblich verbessern. Vorteile von PHPPHP
Erstellen Sie eine einseitige Webanwendung mit Flask und AngularJS
Jun 17, 2023 am 08:49 AM
Mit der rasanten Entwicklung der Webtechnologie ist die Single Page Web Application (SinglePage Application, SPA) zu einem immer beliebter werdenden Webanwendungsmodell geworden. Im Vergleich zu herkömmlichen mehrseitigen Webanwendungen besteht der größte Vorteil von SPA darin, dass die Benutzererfahrung reibungsloser ist und auch der Rechendruck auf dem Server erheblich reduziert wird. In diesem Artikel stellen wir vor, wie man mit Flask und AngularJS ein einfaches SPA erstellt. Flask ist ein leichter Py
Wie verwende ich AngularJS in der PHP-Programmierung?
Jun 12, 2023 am 09:40 AM
Mit der Popularität von Webanwendungen erfreut sich das Frontend-Framework AngularJS immer größerer Beliebtheit. AngularJS ist ein von Google entwickeltes JavaScript-Framework, das Sie beim Erstellen von Webanwendungen mit dynamischen Webanwendungsfunktionen unterstützt. Andererseits ist PHP für die Backend-Programmierung eine sehr beliebte Programmiersprache. Wenn Sie PHP für die serverseitige Programmierung verwenden, bringt die Verwendung von PHP mit AngularJS dynamischere Effekte auf Ihre Website.
Verwenden Sie PHP und AngularJS, um eine Online-Dateiverwaltungsplattform zu entwickeln, die die Dateiverwaltung erleichtert
Jun 27, 2023 pm 01:34 PM
Mit der Popularität des Internets nutzen immer mehr Menschen das Netzwerk, um Dateien zu übertragen und zu teilen. Aus verschiedenen Gründen kann die Verwendung herkömmlicher FTP- und anderer Methoden zur Dateiverwaltung jedoch nicht den Anforderungen moderner Benutzer gerecht werden. Daher ist die Einrichtung einer benutzerfreundlichen, effizienten und sicheren Online-Dateiverwaltungsplattform zu einem Trend geworden. Die in diesem Artikel vorgestellte Online-Dateiverwaltungsplattform basiert auf PHP und AngularJS. Sie kann problemlos Dateien hochladen, herunterladen, bearbeiten, löschen und andere Vorgänge ausführen und bietet eine Reihe leistungsstarker Funktionen wie Dateifreigabe, Suche,
So verwenden Sie PHP und AngularJS für die Frontend-Entwicklung
May 11, 2023 pm 05:18 PM
Mit der Popularität und Entwicklung des Internets wird die Front-End-Entwicklung immer wichtiger. Als Frontend-Entwickler müssen wir verschiedene Entwicklungstools und -technologien verstehen und beherrschen. Unter ihnen sind PHP und AngularJS zwei sehr nützliche und beliebte Tools. In diesem Artikel erklären wir, wie Sie diese beiden Tools für die Frontend-Entwicklung verwenden. 1. Einführung in PHP PHP ist eine beliebte serverseitige Open-Source-Skriptsprache. Sie eignet sich für die Webentwicklung und kann auf Webservern und verschiedenen Betriebssystemen ausgeführt werden. Die Vorteile von PHP sind Einfachheit, Geschwindigkeit und Komfort
Einführung in die Grundlagen von AngularJS
Apr 21, 2018 am 10:37 AM
Der Inhalt dieses Artikels befasst sich mit der grundlegenden Einführung in AngularJS. Jetzt kann ich ihn mit Ihnen teilen.
