Einführung in die Ansichtsfunktionsanwendung von AngularJS_AngularJS
AngularJS unterstützt Einzelseitenanwendungen über mehrere Ansichten auf einer einzelnen Seite. Zu diesem Zweck stellt AngularJS die Direktiven ng-view und ng-template sowie den Dienst $routeProvider bereit.
ng-view
ng-view-Tag erstellt einfach einen Platzhalter für eine entsprechende Ansicht (HTML- oder ng-template-Ansicht), der je nach Konfiguration platziert werden kann.
Verwenden Sie
Definieren Sie eine Div- und NG-Ansicht im Hauptmodul.
<div ng-app="mainApp"> ... <div ng-view></div> </div>
ng-template
Dieng-template-Direktive wird verwendet, um HTML-Ansichten mithilfe von Skript-Tags zu erstellen. Es enthält ein „id“-Attribut für die von $routeProvider zugeordnete Controller-Ansicht.
Verwenden Sie
Definieren Sie den Typ als Skriptblock für ng-template im Hauptmodul.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
</div>
$routeProvider
$routeProvider ist eine Konfiguration, die URLs gruppiert, sie der entsprechenden HTML-Seite oder ng-Vorlage zuordnet und einen Controller mit demselben Schlüssel an den Dienst anfügt.
Verwenden Sie
Definieren Sie den Typ als Skriptblock für ng-template im Hauptmodul.
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
</div>
Verwenden Sie
Definieren Sie den Skriptblock des Hauptmoduls und legen Sie die Routing-Konfiguration fest.
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
Die folgenden wichtigen Punkte sind im obigen Beispiel zu berücksichtigen
- $routeProvider wird als Konfigurationsfunktion des mainApp-Moduls unter „$routeProvider“ mithilfe von Schlüsselwörtern definiert; $routeProvider ordnet die URL „/addStudent“ bei der Definition „addStudent.html“ zu. addStudent.html sollte im selben Pfad wie die Haupt-HTML-Seite vorhanden sein. Wenn die HTM-Seite nicht definiert ist, wird ng-template mit id="addStudent.html" verwendet. Wir haben ng-template;
- verwendet „sonst“ ist die Standardansicht, die zum Festlegen von
- verwendet wird „conlloer“ wird verwendet, um den Controller entsprechend der Ansicht festzulegen;
Das folgende Beispiel demonstriert alle oben genannten Befehle.
testAngularJS.html
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse wie folgt an:
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
1392
52
Der Standby-Modus von iOS 17 verwandelt ein ladendes iPhone in einen Home-Hub
Jun 06, 2023 am 08:20 AM
Mit iOS 17 führt Apple den Standby-Modus ein, ein neues Anzeigeerlebnis zum Laden von iPhones in horizontaler Ausrichtung. In dieser Position kann das iPhone eine Reihe von Vollbild-Widgets anzeigen und wird so zu einem nützlichen Home-Hub. Der Standby-Modus wird automatisch aktiviert, wenn ein iPhone mit iOS 17 horizontal auf dem Ladegerät platziert wird. Sie können Uhrzeit, Wetter, Kalender, Musiksteuerung, Fotos und mehr anzeigen. Sie können durch die verfügbaren Standby-Optionen nach links oder rechts wischen und dann zum Anpassen lange drücken oder nach oben/unten wischen. Sie können beispielsweise zwischen analoger Ansicht, digitaler Ansicht, Blasenschrift und Tageslichtansicht wählen, wobei sich die Hintergrundfarbe im Laufe der Zeit je nach Zeit ändert. Es gibt einige Optionen
So implementieren Sie bearbeitbare Tabellen in Vue
Nov 08, 2023 pm 12:51 PM
Tabellen sind ein wesentlicher Bestandteil vieler Webanwendungen. Tabellen enthalten normalerweise große Datenmengen, daher erfordern Tabellen einige spezifische Funktionen, um die Benutzererfahrung zu verbessern. Eine der wichtigen Funktionen ist die Bearbeitbarkeit. In diesem Artikel untersuchen wir, wie bearbeitbare Tabellen mit Vue.js implementiert werden, und stellen spezifische Codebeispiele bereit. Schritt 1: Daten vorbereiten Zuerst müssen wir die Daten für die Tabelle vorbereiten. Wir können ein JSON-Objekt verwenden, um die Daten der Tabelle zu speichern und sie in der Dateneigenschaft der Vue-Instanz zu speichern. In diesem Fall
Verstehen Sie die Unterschiede und Vergleiche zwischen SpringBoot und SpringMVC
Dec 29, 2023 am 09:20 AM
Vergleichen Sie SpringBoot und SpringMVC und verstehen Sie deren Unterschiede. Mit der kontinuierlichen Weiterentwicklung der Java-Entwicklung ist das Spring-Framework für viele Entwickler und Unternehmen zur ersten Wahl geworden. Im Spring-Ökosystem sind SpringBoot und SpringMVC zwei sehr wichtige Komponenten. Obwohl beide auf dem Spring-Framework basieren, gibt es einige Unterschiede in Funktionen und Verwendung. Dieser Artikel konzentriert sich auf den Vergleich von SpringBoot und Spring
Wie verwende ich das CodeIgniter4-Framework in PHP?
May 31, 2023 pm 02:51 PM
PHP ist eine sehr beliebte Programmiersprache und CodeIgniter4 ist ein häufig verwendetes PHP-Framework. Bei der Entwicklung von Webanwendungen ist die Verwendung von Frameworks sehr hilfreich. Sie können den Entwicklungsprozess beschleunigen, die Codequalität verbessern und die Wartungskosten senken. In diesem Artikel wird die Verwendung des CodeIgniter4-Frameworks vorgestellt. Installation des CodeIgniter4-Frameworks Das CodeIgniter4-Framework kann von der offiziellen Website (https://codeigniter.com/) heruntergeladen werden. Runter
Laravel-Entwicklung: Wie generiert man Ansichten mit Laravel View?
Jun 14, 2023 pm 03:28 PM
Laravel ist derzeit eines der beliebtesten PHP-Frameworks und seine leistungsstarken Funktionen zur Ansichtsgenerierung sind beeindruckend. Eine Ansicht ist eine Seite oder ein visuelles Element, das dem Benutzer in einer Webanwendung angezeigt wird und Code wie HTML, CSS und JavaScript enthält. Mit LaravelView können Entwickler eine strukturierte Vorlagensprache verwenden, um Webseiten zu erstellen und entsprechende Ansichten über Controller und Routing zu generieren. In diesem Artikel erfahren Sie, wie Sie mit LaravelView Ansichten generieren. 1. Was
Was sind die Ansichten von Word?
Mar 19, 2024 pm 06:10 PM
Ich vermute, dass viele Schüler Wortsatzfähigkeiten erlernen möchten, aber der Herausgeber sagt Ihnen insgeheim, dass Sie die Wortansichten klar verstehen müssen. In Word2007 stehen den Benutzern 5 Ansichten zur Auswahl . Ansicht, Leselayout-Ansicht, Web-Layout-Ansicht, Gliederungsansicht und normale Ansicht, lernen wir heute diese 5 Wortansichten mit dem Editor kennen. 1. Seitenansicht Die Seitenansicht kann das Erscheinungsbild des Druckergebnisses des Word2007-Dokuments anzeigen, das hauptsächlich Kopfzeilen, Fußzeilen, Grafikobjekte, Spalteneinstellungen, Seitenränder und andere Elemente umfasst. Dies ist die Seitenansicht, die dem Druckergebnis am nächsten kommt. 2. Leselayoutansicht Die Leselayoutansicht zeigt Word2007-Dokumente und Office im Spaltenstil eines Buches an
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
