这篇文章主要介绍了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中用于存储js0。
----------UserMgt
-------------JS
-------------controller
-------------tml
-------------conf
Code
本例中我们引入angular.js和angular-route.js v1.2.20文件，放在我们的JS目录下。angularJS自身提供的route使用不够方便，我们使用第三方的angular-route框架进行js1分配。首先我们需要编写我们前端的显示界面。
1. index.html，代码如下所示
user mgt demo 用户管理Demo
loading...
2.detail.html, 用于显示一条用户的数据信息，代码如下所示
| 用户名 | |
| 男 | |
| 邮箱 | |
3. js2.html用于显示所有数据，code很简单如下所示
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
| 用户名 | 性别 | 邮箱 |
| {{user.username}} | {{user.gender}} | {{user.email}} |
4. mgt_controller.js
var umService = angular.module('UserMgt', ['ngRoute']);
umService.config(
function ($routeProvider) {
$routeProvider
.when('/', {
controller: ListController,
templateUrl: '../tml/list.html'
})
.when('/get/:id', {
controller: GetController,
templateUrl: "../tml/detail.html"
})
.otherwise({
redirectTo: '/'
});
}
)
function ListController($scope, $http) {
$http.get('../conf/user.json').success(function (data) {
console.log(data);
$scope.users = data;
});
}
function GetController($scope, $http, $routeParams) {
var id = $routeParams.id;
$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. 获取某一用户信息
