首頁 > 文章 > web前端 > 如何使用AngularJS取得json資料的方法詳解

如何使用AngularJS取得json資料的方法詳解

黄舟原創: 2017-05-28 10:38:072002瀏覽

這篇文章主要介紹了Angular JS取得json資料的方法,結合實例形式詳細分析了AngularJS取得json資料的詳細步驟、操作技巧與相關注意事項,需要的朋友可以參考下

本文實例講述了AngularJS獲取json資料的方法。分享給大家供大家參考，具體如下：

學習了這麼多天的AngularJS，今天想從實戰的角度和大家分享一個簡單的Demo--用戶查詢系統，以鞏固前所學。功能需求需要滿足兩點 1.查詢所有用戶信息，並在前端展示 2.根據id查詢用戶信息，展示在前端。 Ok，需求很簡單，那麼我們就開始實現所提的功能需求。

程式碼框架

# 前端的程式碼通常包含三個部分：html, css, 和JavaScript，我們使用html來寫視圖文件，css來進行視圖樣式控制，JS來實作控制器程式碼。本文的重點在於AngularJS的回顧學習，使用簡單的html視圖即可，不會涉及很炫的CSS程式碼編寫。本範例的程式碼的檔案目錄結構很簡單，如下圖所示，分為簡單的兩層目錄，UserMgt為整個Demo的包名，JS目錄用於儲存第三方js程式碼如angular. js，controller用於儲存我們的控制器程式碼，tml目錄儲存html前端文件， conf中用於儲存設定檔。
----------UserMgt
-------------JS
-------------controller
-------------tml
-------------conf

Code

#本例我們引入angular.js和angular-route.js v1.2.20文件，放在我們的JS目錄下。 angularJS本身提供的route使用不夠方便，我們使用第三方的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 . list.html用於顯示所有數據，code很簡單如下所示

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

Result

#1. 展示所有使用者資訊

2. 取得某一用戶資訊

以上是如何使用AngularJS取得json資料的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用Node.js對文字內容分詞以及關鍵字抽取的詳解下一篇：如何使用Node.js對文字內容分詞以及關鍵字抽取的詳解

看更多