AngularJSを使ってjsonデータを取得する方法を詳しく解説-jsチュートリアル-php.cn

AngularJSを使ってjsonデータを取得する方法を詳しく解説

黄舟

リリース： 2017-05-28 10:38:07

オリジナル

2012 人が閲覧しました

この記事では、

AngularJSでjsonデータを取得する方法を主に紹介し、AngularJSのjsonデータを取得するための詳細な手順、操作スキル、および関連するNotes

をサンプルの形式で詳細に分析します。困っている友達は参考にしてください

この記事の例では、AngularJS が json データを取得する方法について説明します。参考までに、以下のように共有します:

AngularJS を何日も勉強した後、今日は実用的な観点から簡単なデモを共有したいと思います。以前に学んだ知識を統合するためのユーザー query

システムです。機能要件は、 1. すべてのユーザー情報をクエリしてフロントエンドに表示する 2. ID に基づいてユーザー情報をクエリしてフロントエンドに表示するという 2 点を満たす必要があります。要件は非常に単純です。次に、機能要件の実装を開始します。

コードフレームワーク

フロントエンドコードには通常、html、css、JavaScriptの 3 つの部分が含まれています。html を使用して view ファイルを記述し、css を使用してビュースタイルを制御し、JS を使用してデバイスのコードを実装します。この記事の焦点は AngularJS のレビューと学習にあり、複雑な CSS コードを記述する必要はなく、単純な HTML ビューを使用できます。この例のコードのファイルディレクトリ構造は、以下の図に示すように非常に単純です。UserMgt は、デモ全体のパッケージ名です。コントローラーによって使用される angular.js などのパーティー JS コード。コントローラーコードを保存するために、tml ディレクトリには HTML フロントエンドファイルが保存され、conf は設定ファイルの保存に使用されます。
----------UserMgt
-------------JS
-------------コントローラー
------ - -----tml
---------------conf

Code

この例では、angular.js ファイルと angular-route.js v1.2.20 ファイルを紹介します。 , JS ディレクトリに配置します。 angularJS によって提供されるルート自体は使用するのに十分便利ではありません。ルーティングの割り当てにはサードパーティの angular-route フレームワークを使用します。まず、フロントエンド表示インターフェイスを作成する必要があります。

1.index.html、コードは次のとおりです

<!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、ユーザーのデータ情報を表示するために使用されます、コードは次のとおりです

<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.すべてを表示するために使用されますデータ、コードは以下に示すように非常に単純です

<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. mgt_controller.js

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

ログイン後にコピー

5. 次のデータは user.json の json に保存されます:

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

ログイン後にコピー

Result1.情報

2. 特定のユーザー情報を取得します