AngularJS獲取json數(shù)據(jù)的方法詳解

2019-11-19 16:28:14

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了AngularJS獲取json數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

學(xué)習(xí)了這么多天的AngularJS，今天想從實(shí)戰(zhàn)的角度和大家分享一個(gè)簡(jiǎn)單的Demo--用戶查詢系統(tǒng)，以鞏固之前所學(xué)知識(shí)。功能需求需要滿足兩點(diǎn) 1.查詢所有用戶信息，并在前端展示 2.根據(jù)id查詢用戶信息，展示在前端。Ok，需求很簡(jiǎn)單，那么我們就開始實(shí)現(xiàn)所提的功能需求。

代碼框架

前端的代碼通常包含三部分：html, css, 和JavaScript，我們使用html編寫視圖文件，css來進(jìn)行視圖樣式控制，JS來實(shí)現(xiàn)控制器代碼。本文的重點(diǎn)在于AngularJS的回顧學(xué)習(xí)，使用簡(jiǎn)單的html視圖即可，不會(huì)涉及很炫的CSS代碼編寫。本例的代碼的文件目錄結(jié)構(gòu)很簡(jiǎn)單，如下圖所示，分為簡(jiǎn)單的兩層目錄，UserMgt為整個(gè)Demo的包名，JS目錄用于存儲(chǔ)第三方j(luò)s代碼如angular.js，controller用于存儲(chǔ)我們的控制器代碼，tml目錄存儲(chǔ)html前端文件， conf中用于存儲(chǔ)配置文件。
----------UserMgt
-------------JS
-------------controller
-------------tml
-------------conf

Code

本例中我們引入angular.js和angular-route.js v1.2.20文件，放在我們的JS目錄下。angularJS自身提供的route使用不夠方便，我們使用第三方的angular-route框架進(jìn)行路由分配。首先我們需要編寫我們前端的顯示界面。

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，表明我們使用路由控制來管理頁(yè)面之間的跳轉(zhuǎn)--><div ng-view>  loading...</div><!--視圖模板容器--><!--引入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, 用于顯示一條用戶的數(shù)據(jù)信息，代碼如下所示

<table border="1">  <tr>    <td>用戶名</td>    <!--使用ng-model綁定item對(duì)象的username屬性-->    <td><input type="text" ng-model="item.username"/></td>  </tr>  <tr>    <td>男</td>    <!--使用ng-model綁定item對(duì)象的gender屬性-->    <td><input type="text" ng-model="item.gender"/></td>  </tr>  <tr>`    <td>郵箱</td>    <!--使用ng-model綁定item對(duì)象的email屬性-->    <td><input type="text" ng-model="item.email"/></td>  </tr>  <tr>  </tr></table>

3. list.html用于顯示所有數(shù)據(jù)，code很簡(jiǎn)單如下所示

<table border="1">   <tr>  <!--設(shè)置表頭-->    <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('UserMgt', ['ngRoute']);<!--路由定義-->umService.config(  function ($routeProvider) {    $routeProvider      <!--項(xiàng)目打開默認(rèn)調(diào)到list.html頁(yè)面，綁定ListController進(jìn)行相應(yīng)的控制-->      .when('/', {        controller: ListController,        templateUrl: '../tml/list.html'      })      <!--定義訪問url-->      .when('/get/:id', {        <!--定義綁定的控制器-->        controller: GetController,        <!--定義跳轉(zhuǎn)的頁(yè)面-->        templateUrl: "../tml/detail.html"      })       .otherwise({        <!--其他情況，指定url跳轉(zhuǎn)-->        redirectTo: '/'      });  })<!--ListController定義-->function ListController($scope, $http) {  <!--獲取本地json資源文件-->  $http.get('../conf/user.json').success(function (data) {    <!--瀏覽器console端口打印讀取的數(shù)據(jù)-->    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];  });}

5. user.json中json中存儲(chǔ)如下的數(shù)據(jù)：

[  { "id": 1, "username": "situ", "gender": "男", "email": "[email protected]" },  { "id": 2, "username": "wb", "gender": "女", "email": "[email protected]" },  { "id": 3, "username": "lml", "gender": "男", "email": "[email protected]" },  { "id": 4, "username": "wjd", "gender": "女", "email": "[email protected]" },  { "id": 5, "username": "lyl", "gender": "男", "email": "[email protected]" },  { "id": 6, "username": "wjh", "gender": "女", "email": "[email protected]" }]

Result

1. 展示所有用戶信息