AngularJS를 사용하여 json 데이터를 얻는 방법에 대한 자세한 설명
이 글에서는 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>
.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에 저장됩니다: 1. information 2. 특정 사용자 정보를 얻습니다 위 내용은 AngularJS를 사용하여 json 데이터를 얻는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요![
{ "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" }
]
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7695
15
1640
14
1393
52
1287
25
1229
29
golang WebSocket과 JSON의 결합: 데이터 전송 및 파싱 구현
Dec 17, 2023 pm 03:06 PM
golangWebSocket과 JSON의 결합: 데이터 전송과 파싱의 실현 현대 웹 개발에서 실시간 데이터 전송은 점점 더 중요해지고 있습니다. WebSocket은 양방향 통신을 달성하는 데 사용되는 프로토콜입니다. 기존 HTTP 요청-응답 모델과 달리 WebSocket을 사용하면 서버가 클라이언트에 데이터를 적극적으로 푸시할 수 있습니다. JSON(JavaScriptObjectNotation)은 간결하고 읽기 쉬운 데이터 교환을 위한 경량 형식입니다.
Java에서 @Expose 주석을 사용하여 JSON에서 필드를 제외하는 방법은 무엇입니까?
Sep 16, 2023 pm 09:49 PM
Gson@Expose 주석은 직렬화 또는 역직렬화를 위해 필드가 노출되는지(포함 여부)를 표시하는 데 사용할 수 있습니다. @Expose 주석은 두 개의 매개변수를 가질 수 있으며, 각 매개변수는 부울 값이고 true 또는 false 값을 가질 수 있습니다. GSON이 @Expose 주석에 반응하려면 GsonBuilder 클래스를 사용하여 Gson 인스턴스를 생성해야 하며, 직렬화 또는 역직렬화에서 Expose 주석이 없는 모든 필드를 제외하도록 Gson을 구성하는 제외FieldsWithoutExposeAnnotation() 메서드를 호출해야 합니다. 구문 publicGsonBuilderexclude
MySQL5.7과 MySQL8.0의 차이점은 무엇입니까?
Feb 19, 2024 am 11:21 AM
MySQL5.7과 MySQL8.0은 서로 다른 두 가지 MySQL 데이터베이스 버전입니다. 두 버전 사이에는 몇 가지 주요 차이점이 있습니다. 성능 개선: MySQL8.0은 MySQL5.7에 비해 성능이 일부 향상되었습니다. 여기에는 더 나은 쿼리 최적화 프로그램, 더 효율적인 쿼리 실행 계획 생성, 더 나은 인덱싱 알고리즘 및 병렬 쿼리 등이 포함됩니다. 이러한 개선 사항은 쿼리 성능과 전반적인 시스템 성능을 향상시킬 수 있습니다. JSON 지원: MySQL 8.0에는 JSON 데이터의 저장, 쿼리 및 인덱싱을 포함하여 JSON 데이터 유형에 대한 기본 지원이 도입되었습니다. 이를 통해 MySQL에서 JSON 데이터를 보다 편리하고 효율적으로 처리하고 조작할 수 있습니다. 트랜잭션 기능: MySQL8.0은 원자와 같은 몇 가지 새로운 트랜잭션 기능을 도입합니다.
PHP 배열을 JSON으로 변환하기 위한 성능 최적화 팁
May 04, 2024 pm 06:15 PM
PHP 배열을 JSON으로 변환하기 위한 성능 최적화 방법은 다음과 같습니다. JSON 확장 및 json_encode() 함수를 사용하여 문자 이스케이프를 방지하고 버퍼를 사용하여 JSON 인코딩 결과 캐싱을 고려합니다. JSON 인코딩 라이브러리.
golang의 json.MarshalIndent 함수를 사용하여 구조를 형식화된 JSON 문자열로 변환합니다.
Nov 18, 2023 pm 01:59 PM
Golang에서 json.MarshalIndent 함수를 사용하여 구조를 형식화된 JSON 문자열로 변환합니다. Golang에서 프로그램을 작성할 때 구조를 JSON 문자열로 변환해야 하는 경우가 종종 있습니다. 이 과정에서 json.MarshalIndent 함수가 도움이 될 수 있습니다. 포맷된 출력. 아래에서는 이 기능을 사용하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다. 먼저 일부 데이터가 포함된 구조를 만들어 보겠습니다. 다음은 표시입니다
C# 개발에서 XML 및 JSON 데이터 형식을 처리하는 방법
Oct 09, 2023 pm 06:15 PM
C# 개발에서 XML 및 JSON 데이터 형식을 처리하려면 특정 코드 예제가 필요합니다. 최신 소프트웨어 개발에서는 XML과 JSON이 널리 사용되는 두 가지 데이터 형식입니다. XML(Extensible Markup Language)은 데이터를 저장하고 전송하는 데 사용되는 마크업 언어인 반면, JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. C# 개발에서는 XML 및 JSON 데이터를 처리하고 조작해야 하는 경우가 많습니다. 이 기사에서는 C#을 사용하여 이 두 가지 데이터 형식을 처리하고 첨부하는 방법에 중점을 둘 것입니다.
Pandas 사용 튜토리얼: JSON 파일 읽기를 위한 빠른 시작
Jan 13, 2024 am 10:15 AM
빠른 시작: JSON 파일을 읽는 Pandas 방법, 특정 코드 예제가 필요합니다. 소개: 데이터 분석 및 데이터 과학 분야에서 Pandas는 중요한 Python 라이브러리 중 하나입니다. 풍부한 기능과 유연한 데이터 구조를 제공하며, 다양한 데이터를 쉽게 처리하고 분석할 수 있습니다. 실제 애플리케이션에서는 JSON 파일을 읽어야 하는 상황에 자주 직면합니다. 이 기사에서는 Pandas를 사용하여 JSON 파일을 읽고 특정 코드 예제를 첨부하는 방법을 소개합니다. 1. 팬더 설치
Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 어떻게 제어합니까?
May 06, 2024 pm 10:09 PM
Jackson 라이브러리의 주석은 JSON 직렬화 및 역직렬화를 제어합니다. 직렬화: @JsonIgnore: 속성 무시 @JsonProperty: 이름 지정 @JsonGetter: get 메서드 사용 @JsonSetter: set 메서드 사용 역직렬화: @JsonIgnoreProperties: @JsonProperty 속성 무시: 이름 지정 @JsonCreator: 생성자 사용 @JsonDeserialize: 사용자 정의 논리
