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，表明我们使用路由控制来管理页面之间的跳转
-->
<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, 用于显示一条用户的数据信息，代码如下所示
<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数据（实战）的更多相关文章
- AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- (转)android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 复制代码 ...
随机推荐
- 添加右键菜单命令 在此处打开命令窗口(E)(带图标)
@color 0A @title 添加右键菜单命令 在此处打开命令窗口(^&E)(带图标) by wjshan0808 @echo off reg add HKCR\Directory\Bac ...
- 关于跨域GET、POST请求的小结//////////////////////zzzzzzz
JQuery:$.ajax/$.getJSON支持jsonp格式的跨域,但是只支持GET方式,暂不支持POST: so,跨域POST是个值得研究的问题啊!万能的JQuery无法跨域POST:鉴于基本国 ...
- WebSocket///////////////////////z
作者:Ovear链接:http://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有,转载请联系作者获得授权. 一.WebSoc ...
- HttpHander与httpModel配置与应用
ASP.NET对请求处理的过程: 当请求一个*.aspx文件的时候,这个请求会被inetinfo.exe进程截获,它判断文件的后缀(aspx)之后,将这个请求转交给 ASPNET_ISAPI.dll, ...
- UIFont的常用字体
+ (UIFont *)systemFontOfSize:(CGFloat)fontSize; 系统默认字体 + (UIFont *)boldSystemFontOfSize:(CGFloat)f ...
- zabbix
snmp监控服务器客户端需安装net-snmp net-snmp-utils 然后修改/etc/snmp/snmpd.conf 启动snmpd服务 自定义监控项目:需在agent端的zabbix_ag ...
- Hello Spring Framework——依赖注入（DI）与控制翻转（IoC）
又到年关了,还有几天就是春节.趁最后还有些时间,复习一下Spring的官方文档. 写在前面的话: Spring是我首次开始尝试通过官方文档来学习的框架(以前学习Struts和Hibernate都大多是 ...
- 在VS中添加lib库的三种方法
注意: 1.每种方法也要复制相应的DLL文件到相应目录,或者设定DLL目录的位置,具体方法为:"Properties" -> "Configuration Prop ...
- 使用XSHELL连接EC2虚拟机实例
sudo passwd root #输入2次密码给root用户设定密码 su - passwd ec2-user #输入两次密码给ec2-user用户设定密码 sed -ri 's/^#?(Passw ...
- SQL表连接查询(inner join、full join、left join、right join)
SQL表连接查询(inner join.full join.left join.right join) 前提条件:假设有两个表,一个是学生表,一个是学生成绩表. 表的数据有: 一.内连接-inner ...