php抓取网页json数据(AngularJS简单的Demo-用户查询系统，巩固之前所学知识)

　　php抓取网页json数据(AngularJS简单的Demo-用户查询系统，巩固之前所学知识)

　　本文的例子描述了AngularJS获取json数据的方法。分享给大家，供大家参考，如下：

　　在学习了这么多天的AngularJS之后，今天我想从实用的角度与大家分享一个简单的Demo-User Query System，以巩固之前所学的知识。功能需求需要满足两点1.查询所有用户信息，并显示在前端2.根据id查询用户信息，并显示在前端。好的，需求很简单，接下来我们开始实现上面提到的功能需求。

　　代码框架

　　前端代码通常由三部分组成：html、css和JavaScript。我们用html写视图文件，用css控制视图样式，用js实现控制器代码。本文的重点是对AngularJS的回顾性学习，使用简单的html视图不会涉及到华而不实的CSS代码编写。本例代码的文件目录结构非常简单。如下图，分为简单的两层目录。 UserMgt是整个Demo的包名，js目录用于存放angular.js等第三方js代码，controller用于存放我们的controller代码，tml目录存放html前端文件, conf用于存放配置文件。

　　---------用户管理

　　----------JS

　　----------控制器

　　----------tml

　　-------------配置

　　代码

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

　　1. index.html，代码如下

　　user mgt demo 用户管理演示

　　加载中...

　　2.detail.html，用于显示一个用户的数据信息，代码如下

　　用户名

　　男

　　电子邮件

　　3. list.html 用于显示所有数据，代码很简单如下所示

　　用户名

　　性别

　　电子邮件

　　{{user.username}}

　　{{user.gender}}

　　{{user.email}}

　　4.mgt_controller.js

　　var umService = angular.module('UserMgt', ['ngRoute']);

　　umService.config(

　　函数（$routeProvider）{

　　$routeProvider

　　.when('/', {

　　控制器：ListController，

　　templateUrl: '../tml/list.html'

　　})

　　.when('/get/:id', {

　　控制器：GetController，

　　templateUrl: "../tml/detail.html"

　　})

　　.否则（{

　　redirectTo: '/'

　　});

　　}

　　)

　　函数 ListController($scope, $http) {

　　$http.get('../conf/user.json').success(函数（数据）{

　　console.log(数据);

　　$scope.users = 数据；

　　});

　　}

　　function GetController($scope, $http, $routeParams) {

　　var id = $routeParams.id;

　　$http.get('../conf/user.json').success(函数（数据）{

　　console.log(数据);

　　$scope.item = 数据[id];

　　});

　　}

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

　　[

　　{ "id": 1, "username": "situ", "gender": "male", "email": "" },

　　{ "id": 2, "username": "wb", "gender": "female", "email": "" },

　　{ "id": 3, "username": "lml", "gender": "male", "email": "" },

　　{ "id": 4, "username": "wjd", "gender": "female", "email": "" },

　　{ "id": 5, "username": "lyl", "gender": "male", "email": "" },

　　{ "id": 6, "username": "wjh", "gender": "female", "email": "" }

　　]

　　结果

　　1. 显示所有用户信息

　　2. 获取用户信息

　　PS：这里有一些比较实用的json在线工具供大家参考：

　　我希望这篇文章对你进行 AngularJS 编程有所帮助。