如何使用AngularJS取得json資料的方法詳解
這篇文章主要介紹了AngularJS取得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('UserMgt', ['ngRoute']);
<!--路由定义-->
umService.config(
function ($routeProvider) {
$routeProvider
<!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
.when('/', {
controller: ListController,
templateUrl: '../tml/list.html'
})
<!--定义访问url-->
.when('/get/:id', {
<!--定义绑定的控制器-->
controller: GetController,
<!--定义跳转的页面-->
templateUrl: "../tml/detail.html"
})
.otherwise({
<!--其他情况，指定url跳转-->
redirectTo: '/'
});
}
)
<!--ListController定义-->
function ListController($scope, $http) {
<!--获取本地json资源文件-->
$http.get('../conf/user.json').success(function (data) {
<!--浏览器console端口打印读取的数据-->
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中存儲如下的資料：
[
{ "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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
golang WebSocket與JSON的結合：實現資料傳輸與解析
Dec 17, 2023 pm 03:06 PM
golangWebSocket與JSON的結合：實現資料傳輸和解析在現代的Web開發中，即時資料傳輸變得越來越重要。 WebSocket是一種用於實現雙向通訊的協議，與傳統的HTTP請求-回應模型不同，WebSocket允許伺服器向客戶端主動推送資料。而JSON（JavaScriptObjectNotation）是一種用於資料交換的輕量級格式，它簡潔易讀
如何在Java中使用@Expose註解從JSON中排除一個欄位？
Sep 16, 2023 pm 09:49 PM
Gson@Expose註解可用於標記欄位是否公開（包含或不包含）以進行序列化或反序列化。 @Expose註解可以採用兩個參數，每個參數都是一個布林值，可以採用值true或false。為了讓GSON對@Expose註解做出反應，我們必須使用GsonBuilder類別建立一個Gson實例，並且需要呼叫excludeFieldsWithoutExposeAnnotation()方法，它將Gson配置為排除所有沒有Expose註解的欄位進行序列化或反序列化。語法publicGsonBuilderexclud
MySQL5.7和MySQL8.0的差別是什麼？
Feb 19, 2024 am 11:21 AM
MySQL5.7和MySQL8.0是兩個不同的MySQL資料庫版本，它們之間有以下一些主要差異：效能改進：MySQL8.0相對於MySQL5.7有一些效能改進。其中包括更好的查詢優化器、更有效率的查詢執行計劃產生、更好的索引演算法和平行查詢等。這些改進可以提高查詢效能和整體系統效能。 JSON支援：MySQL8.0引入了對JSON資料類型的原生支持，包括JSON資料的儲存、查詢和索引。這使得在MySQL中處理和操作JSON資料變得更加方便和有效率。事務特性：MySQL8.0引進了一些新的事務特性，如原子
PHP 數組轉 JSON 的效能最佳化技巧
May 04, 2024 pm 06:15 PM
PHP數組轉JSON的效能最佳化方法包括：使用JSON擴充和json_encode()函數；新增JSON_UNESCAPED_UNICODE選項以避免字元轉義；使用緩衝區提高循環編碼效能；快取JSON編碼結果；考慮使用第三方JSON編碼庫。
使用golang中的json.MarshalIndent函數將結構體轉換為格式化的JSON字串
Nov 18, 2023 pm 01:59 PM
使用golang中的json.MarshalIndent函數將結構體轉換為格式化的JSON字串在使用Golang編寫程式時，我們經常需要將結構體轉換為JSON字串，在這個過程中，json.MarshalIndent函數可以幫助我們實現格式化的輸出。下面我們將詳細介紹如何使用這個函數，並提供具體的程式碼範例。首先，讓我們建立一個包含一些資料的結構體。以下是示
C#開發中如何處理XML和JSON資料格式
Oct 09, 2023 pm 06:15 PM
C#開發中如何處理XML和JSON資料格式，需要具體程式碼範例在現代軟體開發中，XML和JSON是廣泛應用的兩種資料格式。 XML（可擴展標記語言）是一種用於儲存和傳輸資料的標記語言，而JSON（JavaScript物件表示）是一種輕量級的資料交換格式。在C#開發中，我們經常需要處理和操作XML和JSON數據，本文將重點放在如何使用C#處理這兩種數據格式，並附上
Pandas使用教學：讀取JSON檔案的快速入門
Jan 13, 2024 am 10:15 AM
快速入門：Pandas讀取JSON檔案的方法，需要具體程式碼範例引言：在資料分析和資料科學領域，Pandas是一個重要的Python庫之一。它提供了豐富的功能和靈活的資料結構，能夠方便地對各種資料進行處理和分析。在實際應用中，我們經常會遇到需要讀取JSON檔案的情況。本文將介紹如何使用Pandas來讀取JSON文件，並附上特定的程式碼範例。一、Pandas的安裝
Jackson庫中註解如何控制JSON序列化和反序列化？
May 06, 2024 pm 10:09 PM
Jackson庫中的註解可控制JSON序列化和反序列化：序列化：@JsonIgnore：忽略屬性@JsonProperty：指定名稱@JsonGetter：使用獲取方法@JsonSetter：使用設定方法反序列化：@JsonIgnoreProperties：忽略屬性@ JsonProperty：指定名稱@JsonCreator：使用建構子@JsonDeserialize：自訂邏輯
