Heim > Artikel > Web-Frontend > 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

黄舟Original: 2017-05-28 10:38:072002Durchsuche

In diesem Artikel wird hauptsächlich die Methode von Angular JS 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.

CodeFramework

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 die

Routen-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>

2.detail.html, wird zum Anzeigen der Dateninformationen eines Benutzers verwendet, der Code lautet wie folgt

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

4 🎜>5 . Die folgenden Daten werden in json in user.json gespeichert:

<!--定义UserMgt Ajs模块，模块依赖ngRoute-->
var umService = angular.module(&#39;UserMgt&#39;, [&#39;ngRoute&#39;]);
<!--路由定义-->
umService.config(
  function ($routeProvider) {
    $routeProvider
      <!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
      .when(&#39;/&#39;, {
        controller: ListController,
        templateUrl: &#39;../tml/list.html&#39;
      })
      <!--定义访问url-->
      .when(&#39;/get/:id&#39;, {
        <!--定义绑定的控制器-->
        controller: GetController,
        <!--定义跳转的页面-->
        templateUrl: "../tml/detail.html"
      }) 
      .otherwise({
        <!--其他情况，指定url跳转-->
        redirectTo: &#39;/&#39;
      });
  }
)
<!--ListController定义-->
function ListController($scope, $http) {
  <!--获取本地json资源文件-->
  $http.get(&#39;../conf/user.json&#39;).success(function (data) {
    <!--浏览器console端口打印读取的数据-->
    console.log(data);
    $scope.users = data;
  });
}
<!--GetController控制器定义-->
function GetController($scope, $http, $routeParams) {
  var id = $routeParams.id;
  <!--获取本地json资源文件-->
  $http.get(&#39;../conf/user.json&#39;).success(function (data) {
    console.log(data);
    $scope.item = data[id];
  });
}

Ergebnis

[
  { "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" }
]

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung, wie Sie Node.js zum Segmentieren von Textinhalten und zum Extrahieren von Schlüsselwörtern verwendenNächster Artikel：Ausführliche Erklärung, wie Sie Node.js zum Segmentieren von Textinhalten und zum Extrahieren von Schlüsselwörtern verwenden

In Verbindung stehende Artikel

Mehr sehen