甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

AngularJS怎么获取json数据

这篇文章主要介绍AngularJS怎么获取json数据，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比高安网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式高安网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖高安地区。费用合理售后完善，十年实体公司更值得信赖。

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

学习了这么多天的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，代码如下所示





  
  user mgt demo 



用户管理Demo



  loading...

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


  
    用户名
    
    
  
  
    男
    
    
  
  `
    邮箱
    
    
  
  
  

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

 
  
  
    用户名
    性别
    邮箱
  
  
   
      {{user.username}}
    {{user.gender}}
    {{user.email}}
  

4. mgt_controller.js


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

umService.config(
  function ($routeProvider) {
    $routeProvider
      
      .when('/', {
        controller: ListController,
        templateUrl: '../tml/list.html'
      })
      
      .when('/get/:id', {
        
        controller: GetController,
        
        templateUrl: "../tml/detail.html"
      }) 
      .otherwise({
        
        redirectTo: '/'
      });
  }
)

function ListController($scope, $http) {
  
  $http.get('../conf/user.json').success(function (data) {
    
    console.log(data);
    $scope.users = data;
  });
}

function GetController($scope, $http, $routeParams) {
  var id = $routeParams.id;
  
  $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数据

以上是“AngularJS怎么获取json数据”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


当前名称：AngularJS怎么获取json数据
文章URL：http://chengdu.cdxwcx.cn/article/iicdoc.html

其他资讯