簡話Angular 08 Angular ajax

html

1.功能細分簡解

$http 相似JQuery ajax,支持promise
$http.jsonp 跨域訪問,只支持json數據格式,不支持文本,html等其餘格式
$httpProvider 主要在config中使用,作http通用設置
 1 <label>JSONP 實例, Http promise實例</label>
 2     <div ng-controller="JsonPController">
 3         <div id="baidu">
 4             http promise: {{hpromise}} <p></p>
 5             jsonp: {{jsp}} 
 6         </div>
 7     <script>
 8     var myApp = angular.module('myApp', []);
 9 
10     myApp.controller('JsonPController', function($scope, $http) {
11         $http.jsonp("https://api.github.com?callback=JSON_CALLBACK").success(function(data) {
12             $scope.jsp = data;
13         });
14 
15         var promise = $http({
16             method: 'GET',
17             url: 'https://api.github.com'
18         });
19         promise.success(function(data, status, headers, config) {
20             $scope.hpromise = data.current_user_url;
21 
22         });
23         promise.error(function(data, status, headers, config) {
24             scope.hpromise = 'hpromise';
25         });
26 
27     });
28     </script>
29     </div>
30 
31     <p></p>
32     <label>$httpProvider實例</label>
33     <pre>
34 angular.module('myApp', [])
35 .config(function($httpProvider) {
36     $httpProvider.defaults.headers
37         .common['X-Requested-By'] = 'MyAngularApp';
38 });
39     </pre>

2. 在線查看運行效果git

http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/8-ajax.htmlgithub

 

3. 項目地址ajax

github: https://github.com/jimuyouyou/angular-bootstrap-rest-seedjson

相關文章
相關標籤/搜索