详细说明AngularJS获取json数据的方法

编辑：宝哥软件园来源：互联网时间：2021-09-04

新天龙八部

评分

本文说明了AngularJS获取json数据的方法。分享给大家参考，如下：

学了这么多天AngularJS，想从实战的角度和大家分享一个简单的Demo - user查询系统，巩固一下之前的知识。功能需求需要满足两点：1。查询所有用户信息，并在前端显示；2.根据id查询用户信息，并在前端显示。好了，需求很简单，我们就开始实现提出的功能需求。

代码框架

前端代码通常由三部分组成：html、css和JavaScript。我们用html编写视图文件，用css控制视图样式，用JS实现控制器代码。本文重点回顾了AngularJS的研究，使用简单的html视图，并且不涉及令人眼花缭乱的CSS代码编写。这个例子中代码的文件目录结构非常简单，如下图所示，分为两个简单的目录，UserMgt是整个Demo的包名，js目录用来存储angular.js等第三方JS代码，controller用来存储我们的controller代码，tml目录用来存储html前端文件，conf用来存储配置文件。-UserMgt-JS-controller-tml-conf

密码

在这个例子中，我们引入了angular的v1.2.20文件。js和angular-route.js，并将它们放在我们的JS目录中。angularJS本身提供的路由不方便使用，所以我们使用第三方的angular-route框架进行路由分配。首先，我们需要编写我们的前端显示界面。

1.index.html，代码如下

！DOCTYPE html！-定义angular js app-html ng-app=' user mgt ' head meta charset=' utf-8 '/title user mgt Demo/title/head dyh 1 user management Demo/h1！-使用ng-show，表示我们使用路由控制来管理页面之间的跳转- div ng-view加载./div/div！-查看模板容器-！-介绍ng-app-script type=' text/JavaScript ' src=' http 3360 '所需的js文件./js/angular . js '/script script type=' text/JavaScript ' src=' http 3360./js/Angular-route . js/'脚本脚本类型=' text/JavaScript ' src=' http 3360./js/controller/mgt _ controller . js '/script/body/html 2 . detail . html用于显示一条用户数据信息，代码如下

表边框=' 1' tr tdusername /td！-使用ng-model绑定item对象的username属性-TD输入类型=' text ' ng-model=' item . username '/td/tr TD男/TD！-使用ng-model绑定项目对象的性别属性-TD输入类型=' text' ng-model=' item。性别'/TD/tr ` tdmailbox/TD！-使用ng-model绑定项目对象的email属性-TD输入类型=' text' ng-model=' item。电子邮件'/TD/tr/tr/table 3。list.html用于显示所有数据，代码如下所示

表边框='1' tr！-设置标题- td用户名/td td性别/td td电子邮件地址/td /tr！-使用ng-repeat遍历所有用户-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。模块(' UserMgt '，[' ngRoute '])；-路由定义- umService.config(函数($ RouterProvider){ $ RouterProvider！-项目打开默认调到list.html页面，绑定列表控制器进行相应的控制- .当(“/”，{ controller: ListController，templateUrl: './tml/list.html' })！-定义访问url .当('/get/:id '，{！-定义绑定的控制器- controller: GetController，-定义跳转的页面- templateUrl: './tml/detail.html' }).否则({!-其他情况，指定全球资源定位器(统一资源定位符)跳转-redirectto : '/' })；})!列表控制器定义-函数ListController($scope，$http) {！-获取本地json资源文件- $http.get('./conf/user.json ').成功（函数（数据){!-浏览器安慰端口打印读取的数据- console.log(数据);$ scope . users=data })；}!- GetController控制器定义- function GetController($scope，$http，$ Routeparams){ var id=$ Routeparams。id；-获取本地json资源文件- $http.get('./conf/user.json ').成功（函数（数据){ console.log(数据));$ scope。item=data[id]；});}5.user.json中json中存储如下的数据：

[ { 'id': 1 '用户名： '原地'，'性别' : '男，' email': '[emailprotected]' }，{ 'id': 2，' username': 'wb '，' gender': '女、“电子邮件”:“[电子邮件受保护]”}、{“id”: 3、“用户名”:“lml”、“性别”:男，' email': '[emailprotected]' }，{ 'id': 4，' username': 'wjd '，' gender': '女，' email': '[emailprotected]' }，{ 'id': 5，' username': 'lyl '，' gender': '男，' email': '[emailprotected]' }，{ 'id': 6，' username': 'wjh '，' gender': '女、“电子邮件”:“[电子邮件保护]”}]结果

1.展示所有用户信息