AngularJSでの多くのサービスがありますが、一般的にように、このような$ HTTP、$を場所として使用、および。
この記事では、内容を説明します：
1 $ HTTPこの角度が提供するサービスを利用します
いくつかの小さな点に注意することは、サービスとサービスの概要をカスタマイズする方法2。
$ HTTPを使用
AngularJSは、動的な要求データをHTTPリクエストを送信するために$ HTTP、さまざまなサービスを提供してくれます。
これは、プログラムのソースコード、または通常のコードと同じビューの側面を見て、コードを実行するためのWebコンテナを使用する必要があります：
<div ng-controller="myAppCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>出力データの周期と順不同リスト要求を作成します。
JSでは、テンプレート上のコントローラを作成して、テンプレートを作成します。
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){
$http({
method:'GET',
url:'data.json'
}).success(function(data,status,headers,config){
console.log("success!...");
console.log(data);
$scope.users = data;
}).error(function(data,status,headers,config){
console.log("error!...");
});
}]);
</script>通常の通常のものより注入パラメータ$ HTTP以外のコントローラのコントローラは、このパラメータを追加するには、あなたが直接内部のメソッドを呼び出すことができます。
形式は次のとおりです。
$http({
method:'GET',//http请求的类型
url:'data.json'//请求的地址
}).success(function(data,status,headers,config){
//成功了，怎么做
}).error(function(data,status,headers,config){
//失败了，怎么做
});我々は同じコードパス、ファイル作成data.jsonで必要な次
[{
"name":"test1"
},{
"name":"test2"
},{
"name":"test3"
}]本明細書で使用される、Webコンテナを使用して、それが、結果を表示するには、Webページ内の適切なURLを入力して開始した後、HTTPサーバのnodejsを基づいています。
すべてのコードは示しています。
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){
$http({
method:'GET',
url:'data.json'
}).success(function(data,status,headers,config){
console.log("success!...");
console.log(data);
$scope.users = data;
}).error(function(data,status,headers,config){
console.log("error!...");
});
}]);
</script>
</body>
</html>
非常に基本的な、あまりにも多くの説明を行うされていない$ HTTPコンテンツを使用してください。
独自のサービス・サービスを作成します。
その後、独自のサービスを作成する方法を見て、次の3つの方法でサービスを作成することができます工場の、プロバイダやサービスが、その本質はプロバイダですが、それを書くのさまざまな方法をカプセル化します。
本論文では、工場の形でまだに基づいてサービスモジュールを作成し、モジュールを作成することです：
var myAppModule = angular.module("myApp",[]);
myAppModule.factory('myService',['$http',function($http){
var doRequest = function(username){
return $http({
method:'GET',
url:'data.json'
});
}
return {
userList:function(username){
return doRequest(username);
}
}
}]);解析コード：
サービスは、プロパティを注入する必要がある の$ HTTPを メソッド内で、メソッドの戻り値は、外部からユーザリストを提供しています、。
外部 USERLIST（ユーザー名） 、通話モード。
一部の真の実現 doRequestが 、内部は$ HTTPリクエストのAngularJSの典型的なもので、要求は、URLに対応するデータを返します。
次に、どのように外部の使用を見てビューの部分を見てみましょう：
<div ng-controller="myAppCtrl">
<label>username</label>
<input type="text" ng-model="username" placeholder="输入"/>
<pre ng-show="username">
{{users}}
</pre>
</div>入力部は、それらが共同で変数名を使用して、入力ボックスコードボックスとプレ。ユーザ名が値を持っている場合は、以下のユーザーに対応するコンテンツが表示されます。
myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
function($scope,$timeout,myService){
var timeout;
$scope.$watch('username',function(newUserName){
console.log("您输入了："+newUserName);
if(newUserName){
if(timeout){
$timeout.cancel(timeout);
}
timeout = $timeout(function(){
myService.userList(newUserName).success(function(data){
console.log(data);
$scope.users = data;
});
},350);
}
});
}
]);対応するコントローラでは、使用して$ウォッチを監視し、この監視方法ユーザー名プロパティの変更を。場合は、ユーザー名のプロパティの変更は、要求メソッドをトリガー。
エントリの時間を制御するために使用されるマルチ噴射$タイムアウト変数の制御装置。観察コード$タイムアウト（関数（...）、 350）; 入力間隔は350msのを超えた場合、対応する機能をトリガする（...）関数を。これは事実上、ジッタの原因となるページを更新し、リフレッシュ要求を停止し、防ぐことができます。
関数内で提供する当社独自のサービスを呼び出すUSERLIST方法を。リクエストが成功すると、戻り値はバインドするユーザーをして。ユーザーがコンテンツを動的に更新します。
デモを見るプログラムの結果：
テストはそれを見つけた：ときに我々の高速入力4321は、$時計が変数の変化を監視しているが、唯一の要求を送信する前以上350msのために停止しました。
すべてのコードサンプル：
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<div ng-controller="myAppCtrl">
<label>username</label>
<input type="text" ng-model="username" placeholder="输入"/>
<pre ng-show="username">
{{users}}
</pre>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.factory('myService',['$http',function($http){
var doRequest = function(username){
return $http({
method:'GET',
url:'data.json'
});
}
return {
userList:function(username){
return doRequest(username);
}
}
}]);
myAppModule.controller('myAppCtrl',['$scope','$timeout','myService',
function($scope,$timeout,myService){
var timeout;
$scope.$watch('username',function(newUserName){
console.log("您输入了："+newUserName);
if(newUserName){
if(timeout){
$timeout.cancel(timeout);
}
timeout = $timeout(function(){
myService.userList(newUserName).success(function(data){
console.log(data);
$scope.users = data;
});
},350);
}
});
}
]);
</script>
</body>
</html>
カスタムサービスについて、次の点に注意を払う必要があります。
1の使用シナリオ：一般的な抽出方法呼び出されたサービスでは、同じ機能が複数のコントローラから抽出することができるので、サービスフォーム。
2 シングルトン：シングルトンサービスは、アプリケーションのライフサイクルのものであり、サービスのインスタンスは1つだけです。
3 インジェクタ：サービスの例は、すべてのインジェクターインジェクターを作成しています。私たちは、コントローラのコントローラを作成すると、バックmyServiceというサービスを注入する必要性を指摘し、インジェクタは、サービスをインスタンス化するために行くだろう。
参照
[1]砂漠貧しい需要、ムークラスのネットワークます。http：//www.imooc.com/learn/156
ます。https：//my.oschina.net/u/204616/blog/545165で再現