Web-Frontend
js-Tutorial
Ausführliche Erläuterung, wie AngularJS zum Abrufen von JSON-Daten verwendet wird
Ausführliche Erläuterung, wie AngularJS zum Abrufen von JSON-Daten verwendet wird
In diesem Artikel wird hauptsächlich die Methode von AngularJS zum Erhalten von JSON-Daten vorgestellt und die detaillierten Schritte und Vorgänge von AngularJS zum Erhalten von JSON-Daten in Kombination analysiert mit Beispielen. Tipps und verwandte Hinweise, Freunde in Not können sich darauf beziehen
Das Beispiel in diesem Artikel beschreibt, wie AngularJS JSON-Daten erhält. Ich teile es Ihnen als Referenz mit:
Nachdem ich AngularJS so viele Tage lang studiert habe, möchte ich Ihnen heute eine einfache Demo aus praktischer Sicht zeigen – die Benutzerabfrage System zur Konsolidierung bereits erlernten Wissens. Die funktionalen Anforderungen müssen zwei Punkte erfüllen: 1. Alle Benutzerinformationen abfragen und im Frontend anzeigen. 2. Benutzerinformationen basierend auf der ID abfragen und im Frontend anzeigen. Ok, die Anforderungen sind sehr einfach, dann beginnen wir mit der Umsetzung der funktionalen Anforderungen.
Der Front-End-Code enthält normalerweise drei Teile: HTML, CSS und JavaScript, wir verwenden HTML, um die Ansichtsdatei zu schreiben, CSS, um den Ansichtsstil zu steuern, und JS, um den Controller-Code zu implementieren. Der Schwerpunkt dieses Artikels liegt auf der Überprüfung und dem Erlernen von AngularJS. Sie können eine einfache HTML-Ansicht verwenden und müssen keinen ausgefallenen CSS-Code schreiben. Die Datei Verzeichnisstruktur des Codes in diesem Beispiel ist sehr einfach, wie in der folgenden Abbildung gezeigt. Sie ist in zwei einfache Verzeichnisse unterteilt: UserMgt ist der Paketname der gesamten Demo und das JS-Verzeichnis Wird zum Speichern von JS-Code von Drittanbietern wie Angular js verwendet, Controller wird zum Speichern unseres Controller-Codes verwendet, das TML-Verzeichnis speichert HTML-Front-End-Dateien und conf wird zum Speichern von Konfigurationsdateien verwendet. ----------UserMgt
-------------JS
-------------Controller
-------------tml
-------------conf
Code
In diesem Beispiel führen wir die Dateien „angular.js“ und „angular-route.js v1.2.20“ ein und platzieren sie in unserem JS-Verzeichnis. Die von AngularJS selbst bereitgestellte Route ist nicht praktisch genug. Wir verwenden das Angular-Route-Framework eines Drittanbieters für dieRouten-Zuweisung. Zuerst müssen wir unsere Front-End-Anzeigeschnittstelle schreiben.
1. index.html, der Code lautet wie folgt<!DOCTYPE html> <!--定义AngularJS app--> <html ng-app="UserMgt"> <head> <meta charset="utf-8"/> <title>user mgt demo </title> </head> <body> <h1>用户管理Demo</h1> <!--使用ng-show，表明我们使用路由控制来管理页面之间的跳转 --> <p ng-view> loading... </p><!--视图模板容器--> <!--引入ng-app所需的js文件--> <script type="text/javascript" src="../js/angular.js"></script> <script type="text/javascript" src="../js/angular-route.js"></script> <script type="text/javascript" src="../js/controller/mgt_controller.js"></script> </body> </html>
<table border="1">
<tr>
<td>用户名</td>
<!--使用ng-model绑定item对象的username属性-->
<td><input type="text" ng-model="item.username"/></td>
</tr>
<tr>
<td>男</td>
<!--使用ng-model绑定item对象的gender属性-->
<td><input type="text" ng-model="item.gender"/></td>
</tr>
<tr>`
<td>邮箱</td>
<!--使用ng-model绑定item对象的email属性-->
<td><input type="text" ng-model="item.email"/></td>
</tr>
<tr>
</tr>
</table>list.html wird verwendet, um alle Daten anzuzeigen:
<table border="1">
<tr>
<!--设置表头-->
<td>用户名</td>
<td>性别</td>
<td>邮箱</td>
</tr>
<!--使用ng-repeat，遍历所有的user-->
<tr ng-repeat="user in users">
<td>{{user.username}}</td>
<td>{{user.gender}}</td>
<td>{{user.email}}</td>
</tr>
</table><!--定义UserMgt Ajs模块，模块依赖ngRoute-->
var umService = angular.module('UserMgt', ['ngRoute']);
<!--路由定义-->
umService.config(
function ($routeProvider) {
$routeProvider
<!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
.when('/', {
controller: ListController,
templateUrl: '../tml/list.html'
})
<!--定义访问url-->
.when('/get/:id', {
<!--定义绑定的控制器-->
controller: GetController,
<!--定义跳转的页面-->
templateUrl: "../tml/detail.html"
})
.otherwise({
<!--其他情况，指定url跳转-->
redirectTo: '/'
});
}
)
<!--ListController定义-->
function ListController($scope, $http) {
<!--获取本地json资源文件-->
$http.get('../conf/user.json').success(function (data) {
<!--浏览器console端口打印读取的数据-->
console.log(data);
$scope.users = data;
});
}
<!--GetController控制器定义-->
function GetController($scope, $http, $routeParams) {
var id = $routeParams.id;
<!--获取本地json资源文件-->
$http.get('../conf/user.json').success(function (data) {
console.log(data);
$scope.item = data[id];
});
}[
{ "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" },
{ "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" },
{ "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" },
{ "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" },
{ "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" },
{ "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" }
]1
2. Erhalten Sie bestimmte Benutzerinformationen
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie AngularJS zum Abrufen von JSON-Daten verwendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
1665
14
1423
52
1321
25
1269
29
1249
24
Wie schließe ich ein Feld mithilfe der @Expose-Annotation in Java aus JSON aus?
Sep 16, 2023 pm 09:49 PM
Die Gson@Expose-Annotation kann verwendet werden, um zu markieren, ob ein Feld für die Serialisierung oder Deserialisierung verfügbar (enthalten oder nicht) ist. Die @Expose-Annotation kann zwei Parameter annehmen. Jeder Parameter ist ein boolescher Wert und kann den Wert true oder false annehmen. Damit GSON auf die @Expose-Annotation reagieren kann, müssen wir mit der GsonBuilder-Klasse eine Gson-Instanz erstellen und die Methode „excludeFieldsWithoutExposeAnnotation()“ aufrufen, die Gson so konfiguriert, dass alle Felder ohne Expose-Annotation von der Serialisierung oder Deserialisierung ausgeschlossen werden. Syntax publicGsonBuilderexclud
Kombination von Golang WebSocket und JSON: Realisierung der Datenübertragung und -analyse
Dec 17, 2023 pm 03:06 PM
Die Kombination von golangWebSocket und JSON: Datenübertragung und Parsing realisieren In der modernen Webentwicklung wird die Datenübertragung in Echtzeit immer wichtiger. WebSocket ist ein Protokoll, das zur bidirektionalen Kommunikation verwendet wird. Im Gegensatz zum herkömmlichen HTTP-Anfrage-Antwort-Modell ermöglicht WebSocket dem Server, Daten aktiv an den Client zu übertragen. JSON (JavaScriptObjectNotation) ist ein leichtes Format für den Datenaustausch, das prägnant und leicht lesbar ist.
Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON
May 04, 2024 pm 06:15 PM
Zu den Leistungsoptimierungsmethoden für die Konvertierung von PHP-Arrays in JSON gehören: Verwendung von JSON-Erweiterungen und der Funktion json_encode(); Verwendung von Puffern zur Verbesserung der Leistung der Schleifencodierung; JSON-Codierungsbibliothek.
Was ist der Unterschied zwischen MySQL5.7 und MySQL8.0?
Feb 19, 2024 am 11:21 AM
MySQL5.7 und MySQL8.0 sind zwei verschiedene MySQL-Datenbankversionen. Es gibt einige Hauptunterschiede zwischen ihnen: Leistungsverbesserungen: MySQL8.0 weist im Vergleich zu MySQL5.7 einige Leistungsverbesserungen auf. Dazu gehören bessere Abfrageoptimierer, eine effizientere Erstellung von Abfrageausführungsplänen, bessere Indizierungsalgorithmen und parallele Abfragen usw. Diese Verbesserungen können die Abfrageleistung und die Gesamtsystemleistung verbessern. JSON-Unterstützung: MySQL 8.0 führt native Unterstützung für den JSON-Datentyp ein, einschließlich Speicherung, Abfrage und Indizierung von JSON-Daten. Dies macht die Verarbeitung und Bearbeitung von JSON-Daten in MySQL bequemer und effizienter. Transaktionsfunktionen: MySQL8.0 führt einige neue Transaktionsfunktionen ein, z. B. atomic
Verwenden Sie die Funktion json.MarshalIndent in Golang, um die Struktur in einen formatierten JSON-String zu konvertieren
Nov 18, 2023 pm 01:59 PM
Verwenden Sie die Funktion json.MarshalIndent in Golang, um die Struktur in einen formatierten JSON-String zu konvertieren. Bei diesem Prozess kann uns die Funktion json.MarshalIndent helfen formatierte Ausgabe. Im Folgenden erläutern wir detailliert die Verwendung dieser Funktion und stellen konkrete Codebeispiele bereit. Erstellen wir zunächst eine Struktur mit einigen Daten. Das Folgende ist ein Hinweis
Umgang mit XML- und JSON-Datenformaten in der C#-Entwicklung
Oct 09, 2023 pm 06:15 PM
Für den Umgang mit XML- und JSON-Datenformaten in der C#-Entwicklung sind spezifische Codebeispiele erforderlich. In der modernen Softwareentwicklung sind XML und JSON zwei weit verbreitete Datenformate. XML (Extensible Markup Language) ist eine Auszeichnungssprache zum Speichern und Übertragen von Daten, während JSON (JavaScript Object Notation) ein leichtes Datenaustauschformat ist. Bei der C#-Entwicklung müssen wir häufig XML- und JSON-Daten verarbeiten und verarbeiten. Dieser Artikel konzentriert sich auf die Verwendung von C# zum Verarbeiten und Anhängen dieser beiden Datenformate
Verwenden Sie die json_encode()-Funktion von PHP, um ein Array oder Objekt in einen JSON-String zu konvertieren und die Ausgabe zu formatieren
Nov 03, 2023 pm 03:44 PM
Die Verwendung der json_encode()-Funktion von PHP zum Konvertieren eines Arrays oder Objekts in einen JSON-String und zum Formatieren der Ausgabe kann die Übertragung und den Austausch von Daten zwischen verschiedenen Plattformen und Sprachen erleichtern. In diesem Artikel wird die grundlegende Verwendung der Funktion json_encode() sowie die Formatierung und Ausgabe einer JSON-Zeichenfolge vorgestellt. 1. Grundlegende Verwendung der Funktion json_encode() Die grundlegende Syntax der Funktion json_encode() lautet wie folgt: stringjson_encod
Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung?
May 06, 2024 pm 10:09 PM
Anmerkungen in der Jackson-Bibliothek steuern die JSON-Serialisierung und -Deserialisierung: Serialisierung: @JsonIgnore: Ignorieren Sie die Eigenschaft @JsonProperty: Geben Sie den Namen an @JsonGetter: Verwenden Sie die get-Methode @JsonSetter: Verwenden Sie die set-Methode Deserialisierung: @JsonIgnoreProperties: Ignorieren Sie die Eigenschaft @ JsonProperty: Geben Sie den Namen @JsonCreator an: Verwenden Sie den Konstruktor @JsonDeserialize: Benutzerdefinierte Logik
