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 相关文章推荐
jquery实现手风琴效果实例代码
Nov 15 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
JS学习笔记之闭包小案例分析
May 29 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
URL Rewrite的设置方法
2007/01/02 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
php 生成短网址原理及代码
2014/01/23 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js判断密码强度的方法
2020/03/18 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
pymysql 开启调试模式的实现
2019/09/24 Python
学校司机岗位职责
2013/11/14 职场文书
银行服务感言
2014/03/01 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
党员创先争优活动总结
2014/05/04 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
财务审计整改报告
2014/11/06 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js
ubuntu下常用apt命令介绍
2022/06/05 Servers