AngularJS获取json数据的方法详解


Posted in Javascript onMay 27, 2017

本文实例讲述了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. 展示所有用户信息

AngularJS获取json数据的方法详解

2. 获取某一用户信息

AngularJS获取json数据的方法详解

Javascript 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
JS面向对象编程详解
Mar 06 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 #Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
详解如何使用webpack打包Vue工程
May 27 #Javascript
Jquery中attr与prop的区别详解
May 27 #jQuery
angular使用post、get向后台传参的问题实例
May 27 #Javascript
AngularJS中使用ngModal模态框实例
May 27 #Javascript
angularJS模态框$modal实例代码
May 27 #Javascript
You might like
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
10个简化PHP开发的工具
2014/12/25 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JS实现购物车特效
2017/02/02 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
供货协议书
2014/04/22 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
庆七一宣传标语
2014/10/08 职场文书
财务工作检讨书
2014/10/29 职场文书
好员工观后感
2015/06/17 职场文书
新教师教学工作总结
2015/08/12 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers