AngularJS를 사용하여 json 데이터를 얻는 방법에 대한 자세한 설명
- 黄舟원래의
- 2017-05-28 10:38:072002검색
이 글에서는 json데이터를 얻기 위한 AngularJS 방법을 주로 소개합니다. AngularJS의 세부 단계, 조작 기술 및 관련 Notes를 분석하여
json데이터를 세부적으로 예제 형식으로 설명합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
이 문서의 예에서는 AngularJS가 json 데이터를 얻는 방법을 설명합니다. 참고할 수 있도록 다음과 같이 공유합니다. 수일 동안 AngularJS를 공부한 후 오늘은 실용적인 관점에서 간단한 데모를 공유하고 싶습니다. 즉, 이전에 배운 지식을 통합하는 사용자
query시스템입니다. 기능적 요구 사항은 두 가지 사항을 충족해야 합니다. 1. 모든 사용자 정보를 쿼리하여 프런트 엔드에 표시합니다. 2. ID를 기반으로 사용자 정보를 쿼리하여 프런트 엔드에 표시합니다. 좋습니다. 요구 사항은 매우 간단합니다. 그러면 기능적 요구 사항을 구현하기 시작합니다. CodeFramework
프론트 엔드 코드는 일반적으로 html, css 및 JavaScript의 세 부분으로 구성됩니다. html을 사용하여 view 파일을 작성하고 CSS를 사용하여 뷰 스타일을 제어합니다. control 코드를 구현합니다. 이 기사의 초점은 AngularJS를 검토하고 배우는 것입니다. 간단한 HTML 보기를 사용할 수 있으며 멋진 CSS 코드를 작성하지 않아도 됩니다. 이 예제의 파일 디렉토리 구조는 아래 그림과 같이 매우 간단합니다. UserMgt는 전체 Demo의 패키지 이름입니다. 컨트롤러에서 사용하는 angle.js와 같은 파티 js 코드는 컨트롤러 코드를 저장하기 위해 tml 디렉토리에 html 프런트 엔드 파일을 저장하고 conf는
구성 파일
을 저장하는 데 사용됩니다.
------------UserMgt
-------------JS
---------------컨트롤러
---------------confCode
이 예에서는angular.js 및angular-route.js v1.2.20 파일을 소개합니다. , JS 디렉토리에 넣으세요. AngleJS 자체에서 제공하는 경로는 사용하기에 충분히 편리하지 않습니다. 우리는
라우팅할당을 위해 타사 각도 경로 프레임워크를 사용합니다. 먼저 프런트 엔드 디스플레이 인터페이스를 작성해야 합니다.
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
.html은 모든 정보를 표시하는 데 사용됩니다. data, 코드는 아래와 같이 매우 간단합니다
<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('UserMgt', ['ngRoute']);
<!--路由定义-->
umService.config(
function ($routeProvider) {
$routeProvider
<!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
.when('/', {
controller: ListController,
templateUrl: '../tml/list.html'
})
<!--定义访问url-->
.when('/get/:id', {
<!--定义绑定的控制器-->
controller: GetController,
<!--定义跳转的页面-->
templateUrl: "../tml/detail.html"
})
.otherwise({
<!--其他情况，指定url跳转-->
redirectTo: '/'
});
}
)
<!--ListController定义-->
function ListController($scope, $http) {
<!--获取本地json资源文件-->
$http.get('../conf/user.json').success(function (data) {
<!--浏览器console端口打印读取的数据-->
console.log(data);
$scope.users = data;
});
}
<!--GetController控制器定义-->
function GetController($scope, $http, $routeParams) {
var id = $routeParams.id;
<!--获取本地json资源文件-->
$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. information
2. 특정 사용자 정보를 얻습니다
위 내용은 AngularJS를 사용하여 json 데이터를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!