简话Angular 08 Angular ajax

一句话: 它们Angular框架声明周期的各个阶段,常规约定各专注于特定功能,经过处理也可以互相替换

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. 在线查看运行效果

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

3. 项目地址

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