AngularJS獲取json數(shù)據(jù)的方法詳解
本文實(shí)例講述了AngularJS獲取json數(shù)據(jù)的方法。分享給大家供大家參考,具體如下:
學(xué)習(xí)了這么多天的AngularJS,今天想從實(shí)戰(zhàn)的角度和大家分享一個(gè)簡(jiǎn)單的Demo--用戶查詢(xún)系統(tǒng),以鞏固之前所學(xué)知識(shí)。功能需求需要滿足兩點(diǎn) 1.查詢(xún)所有用戶信息,并在前端展示 2.根據(jù)id查詢(xún)用戶信息,展示在前端。Ok,需求很簡(jiǎn)單,那么我們就開(kāi)始實(shí)現(xiàn)所提的功能需求。
代碼框架
前端的代碼通常包含三部分:html, css, 和JavaScript,我們使用html編寫(xiě)視圖文件,css來(lái)進(jìn)行視圖樣式控制,JS來(lái)實(shí)現(xiàn)控制器代碼。本文的重點(diǎn)在于AngularJS的回顧學(xué)習(xí),使用簡(jiǎn)單的html視圖即可,不會(huì)涉及很炫的CSS代碼編寫(xiě)。本例的代碼的文件目錄結(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)行路由分配。首先我們需要編寫(xiě)我們前端的顯示界面。
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,表明我們使用路由控制來(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模塊,模塊依賴(lài)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. 展示所有用戶信息
2. 獲取某一用戶信息
PS:這里再為大家推薦幾款比較實(shí)用的json在線工具供大家參考使用:
在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
JSON在線格式化工具:
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉(zhuǎn)換工具:
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
C語(yǔ)言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
ng2學(xué)習(xí)筆記之bootstrap中的component使用教程
現(xiàn)在angular2已經(jīng)除了集成的angular-cli,建議大家可以基于這個(gè)來(lái)快速開(kāi)發(fā)ng2的項(xiàng)目,不用自己再搭建環(huán)境。接下來(lái)通過(guò)本文給大家介紹 bootstrap中的component使用教程,需要的朋友可以參考下2017-03-03詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06詳解Angular CLI + Electron 開(kāi)發(fā)環(huán)境搭建
本篇文章主要介紹了Angular CLI + Electron 開(kāi)發(fā)環(huán)境搭建,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼
分頁(yè)是很多web應(yīng)用都會(huì)用到的,本篇文章主要介紹了Angularjs實(shí)現(xiàn)分頁(yè)和分頁(yè)算法的示例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,涉及AngularJS事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單)
這篇文章主要介紹了angular中兩種表單的區(qū)別(響應(yīng)式和模板驅(qū)動(dòng)表單),詳細(xì)的介紹了這兩種表單的實(shí)現(xiàn)以及區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-12-12AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)庫(kù)信息效果的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-07AngularJS+Node.js實(shí)現(xiàn)在線聊天室
隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展,如何快速構(gòu)建高效、強(qiáng)大的動(dòng)態(tài)網(wǎng)站成為很多人研究的熱點(diǎn)。該文將結(jié)合AngularJS和Node.js構(gòu)建一個(gè)在線聊天室,體現(xiàn)AngularJs和Node.js整合的優(yōu)點(diǎn)。2015-08-08