Home > Article > Web Front-end > Detailed explanation of how to use AngularJS to obtain json data

Detailed explanation of how to use AngularJS to obtain json data

黄舟Original: 2017-05-28 10:38:072002browse

This article mainly introduces the method of Angular JS to obtain json data, and analyzes the detailed steps and operations of AngularJS to obtain json data in combination with examples. Skills and related Notes, friends in need can refer to the following

The example of this article describes the method of obtaining json data in AngularJS. I share it with you for your reference. The details are as follows:

After studying AngularJS for so many days, today I want to share with you a simple Demo from a practical perspective-user query system, to Consolidate previously learned knowledge. Functional requirements need to meet two points: 1. Query all user information and display it on the front end. 2. Query user information based on ID and display it on the front end. Ok, the requirements are very simple, then we start to implement the functional requirements.

CodeFramework

The front-end code usually contains three parts: html, css, and JavaScript, we use html to write the view file, css to control the view style, and JS to implement the controller code. The focus of this article is on the review and learning of AngularJS. You can use a simple html view and will not involve writing fancy CSS code. The fileDirectory structure of the code in this example is very simple, as shown in the figure below, which is divided into two simple directories. UserMgt is the package name of the entire Demo, and the JS directory is used to store third-party js code such as angular. js, controller is used to store our controller code, the tml directory stores html front-end files, and conf is used to store configuration files.
----------UserMgt
-------------JS
-------------controller
-------------tml
-------------conf

Code

In this example, we introduce the angular.js and angular-route.js v1.2.20 files and place them in our JS directory. The route provided by angularJS itself is not convenient enough to use. We use the third-party angular-route framework for routing allocation. First we need to write our front-end display interface.

1. index.html, the code is as follows

<!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, used to display a user’s data information, the code is as follows

<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 is used to display all data. The code is very simple as shown below

<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(&#39;UserMgt&#39;, [&#39;ngRoute&#39;]);
<!--路由定义-->
umService.config(
  function ($routeProvider) {
    $routeProvider
      <!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
      .when(&#39;/&#39;, {
        controller: ListController,
        templateUrl: &#39;../tml/list.html&#39;
      })
      <!--定义访问url-->
      .when(&#39;/get/:id&#39;, {
        <!--定义绑定的控制器-->
        controller: GetController,
        <!--定义跳转的页面-->
        templateUrl: "../tml/detail.html"
      }) 
      .otherwise({
        <!--其他情况，指定url跳转-->
        redirectTo: &#39;/&#39;
      });
  }
)
<!--ListController定义-->
function ListController($scope, $http) {
  <!--获取本地json资源文件-->
  $http.get(&#39;../conf/user.json&#39;).success(function (data) {
    <!--浏览器console端口打印读取的数据-->
    console.log(data);
    $scope.users = data;
  });
}
<!--GetController控制器定义-->
function GetController($scope, $http, $routeParams) {
  var id = $routeParams.id;
  <!--获取本地json资源文件-->
  $http.get(&#39;../conf/user.json&#39;).success(function (data) {
    console.log(data);
    $scope.item = data[id];
  });
}

5. Stored in json in user.json The following data:

[
  { "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. Display all user information

2. Obtain a certain user information

The above is the detailed content of Detailed explanation of how to use AngularJS to obtain json data. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of how to use Node.js to segment text content and extract keywordsNext article：Detailed explanation of how to use Node.js to segment text content and extract keywords

See more

Detailed explanation of how to use AngularJS to obtain json data

Related articles