如何使用AngularJS获取json数据的方法详解

来源：动视网责编：小采时间：2020-11-27 20:22:26

如何使用AngularJS获取json数据的方法详解

如何使用AngularJS获取json数据的方法详解:这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下本文实例讲述了AngularJS获取json数据的方法。分享给大家供大家参考，具体如下：学习了这么多天的An

推荐度：

点击下载本文 文档为doc格式

导读如何使用AngularJS获取json数据的方法详解:这篇文章主要介绍了AngularJS获取json数据的方法,结合实例形式详细分析了AngularJS获取json数据的详细步骤、操作技巧与相关注意事项,需要的朋友可以参考下本文实例讲述了AngularJS获取json数据的方法。分享给大家供大家参考，具体如下：学习了这么多天的An

这篇文章主要介绍了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中用于存储配置文件。
----------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，表明我们使用路由控制来管理页面之间的跳转
-->
<p ng-view>
 loading...
</p><!--视图模板容器-->
<!--引入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

5. user.json中json中存储如下的数据：

Result

1. 展示所有用户信息