Maison >interface Web >js tutoriel >Explication détaillée de la façon d'utiliser AngularJS pour obtenir des données json

Explication détaillée de la façon d'utiliser AngularJS pour obtenir des données json

黄舟original: 2017-05-28 10:38:072034parcourir

Cet article présente principalement la méthode de Angular JS pour obtenir des données json, et analyse les étapes et opérations détaillées d'AngularJS pour obtenir des données json en combinaison avec des exemples. Conseils et Notes associées, les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit comment AngularJS obtient les données json. Je le partage avec vous pour votre référence. Les détails sont les suivants :

Après avoir étudié AngularJS pendant tant de jours, je souhaite aujourd'hui partager avec vous une démo simple d'un point de vue pratique : la requête de l'utilisateur . système pour consolider les connaissances acquises précédemment. Les exigences fonctionnelles doivent répondre à deux points : 1. Interroger toutes les informations utilisateur et les afficher sur le front-end. 2. Interroger les informations utilisateur en fonction de l'ID et les afficher sur le front-end. Ok, les exigences sont très simples, puis nous commençons à implémenter les exigences fonctionnelles.

CodeFramework

Le code front-end contient généralement trois parties : html, css et JavaScript, nous utilisons html pour écrire le fichier view, css pour contrôler le style d'affichage et JS pour implémenter le code controller. Cet article se concentre sur la révision et l'apprentissage d'AngularJS. Vous pouvez utiliser une vue HTML simple et n'impliquerez pas l'écriture de code CSS sophistiqué. La structure du fichier répertoire du code dans cet exemple est très simple, comme le montre la figure ci-dessous, qui est divisée en deux répertoires simples. UserMgt est le nom du package de la démo entière et le répertoire JS est. utilisé pour stocker du code js tiers tel que angulaire.js, le contrôleur est utilisé pour stocker notre code de contrôleur, le répertoire tml stocke les fichiers frontaux html et conf est utilisé pour stocker les fichiers de configuration .
---------UserMgt
-------------JS
-------------contrôleur
-------------tml
------------conf

Code

Dans cet exemple, nous introduisons les fichiers angulaires.js et angulaire-route.js v1.2.20 et les plaçons dans notre répertoire JS. La route fournie par angulaireJS elle-même n'est pas assez pratique à utiliser. Nous utilisons le framework tiers de route angulaire pour l'allocation route. Nous devons d’abord écrire notre interface d’affichage frontale.

1. index.html, le code est le suivant

<!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, utilisé pour afficher les informations sur les données d'un utilisateur, le code est le suivant

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

3. list.html est utilisé pour afficher toutes les données. Le code est très simple comme suit

<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 . Les données suivantes sont stockées en json dans user.json :

<!--定义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];
  });
}

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

Résultat

2. Obtenez certaines informations utilisateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon d'utiliser Node.js pour segmenter le contenu du texte et extraire des mots-clésArticle suivant：Explication détaillée de la façon d'utiliser Node.js pour segmenter le contenu du texte et extraire des mots-clés

Articles Liés

Voir plus