AngularJS怎么獲取json數(shù)據(jù)

這篇文章主要介紹AngularJS怎么獲取json數(shù)據(jù)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比高安網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式高安網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋高安地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

js的作用是什么

1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

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

代碼框架

前端的代碼通常包含三部分：html, css, 和JavaScript，我們使用html編寫視圖文件，css來(lái)進(jìn)行視圖樣式控制，JS來(lái)實(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>
<h2>用戶管理Demo</h2>
<!--使用ng-show，表明我們使用路由控制來(lái)管理頁(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)目打開(kāi)默認(rèn)調(diào)到list.html頁(yè)面，綁定ListController進(jìn)行相應(yīng)的控制-->
      .when('/', {
        controller: ListController,
        templateUrl: '../tml/list.html'
      })
      <!--定義訪問(wèn)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": "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. 展示所有用戶信息

AngularJS怎么獲取json數(shù)據(jù)

2. 獲取某一用戶信息

AngularJS怎么獲取json數(shù)據(jù)

以上是“AngularJS怎么獲取json數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)名稱：AngularJS怎么獲取json數(shù)據(jù)
分享地址：http://bm7419.com/article2/iicdoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容