ホームページ > 記事 > ウェブフロントエンド > AngularJSを使ってjsonデータを取得する方法を詳しく解説
AngularJSを使ってjsonデータを取得する方法を詳しく解説
- 黄舟オリジナル
- 2017-05-28 10:38:072001ブラウズ
この記事では、
AngularJSでjsonデータを取得する方法を主に紹介し、AngularJSのjsonデータを取得するための詳細な手順、操作スキル、および関連するNotes
をサンプルの形式で詳細に分析します。困っている友達は参考にしてください この記事の例では、AngularJS が json データを取得する方法について説明します。参考までに、以下のように共有します:AngularJS を何日も勉強した後、今日は実用的な観点から簡単なデモを共有したいと思います。以前に学んだ知識を統合するためのユーザー query
システムです。機能要件は、 1. すべてのユーザー情報をクエリしてフロントエンドに表示する 2. ID に基づいてユーザー情報をクエリしてフロントエンドに表示する という 2 点を満たす必要があります。要件は非常に単純です。次に、機能要件の実装を開始します。コードフレームワーク
フロントエンドコードには通常、html、css、JavaScriptの 3 つの部分が含まれています。html を使用して view ファイルを記述し、css を使用してビュー スタイルを制御し、JS を使用してデバイスのコードを実装します。この記事の焦点は AngularJS のレビューと学習にあり、複雑な CSS コードを記述する必要はなく、単純な HTML ビューを使用できます。この例のコードのファイルディレクトリ構造は、以下の図に示すように非常に単純です。UserMgt は、デモ全体のパッケージ名です。コントローラーによって使用される angular.js などのパーティー JS コード。コントローラー コードを保存するために、tml ディレクトリには HTML フロントエンド ファイルが保存され、conf は 設定ファイル の保存に使用されます。
----------UserMgt
-------------JS
-------------コントローラー
------ - -----tml
---------------conf
Code
この例では、angular.js ファイルと angular-route.js v1.2.20 ファイルを紹介します。 , JS ディレクトリに配置します。 angularJS によって提供されるルート自体は使用するのに十分便利ではありません。ルーティング の割り当てにはサードパーティの angular-route フレームワークを使用します。まず、フロントエンド表示インターフェイスを作成する必要があります。
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.すべてを表示するために使用されますデータ、コードは以下に示すように非常に単純です<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" }
]
Result1.情報
2. 特定のユーザー情報を取得します
以上がAngularJSを使ってjsonデータを取得する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。