angular 학습노트(21)-$http.get

7946 단어 Angular
기본 구문:
$http.get('url',{}).success(function(data,status,headers,config){
}).error(function(data,status,headers,config){
})

$http.get은 두 개의 인자를 수락합니다:
1. url: 요청한 경로
2. json 대상: {params: {id:5}와 같은 매개 변수 설정을 요청합니다.
이렇게 얻은 실제 경로가 url?id=5
$http.get에서 되돌아오는 대상은 두 가지 리셋 방법이 있습니다:
1.success:성공적인 리셋 요청
2. error: 실패한 콜백 요청
두 방법 모두
① 데이터: 반환된 데이터(또는 오류)
② status: 응답하는 상태 코드
③ headers: 이러한 함수는 구체적으로 어떤 것인지 불분명하다
function (name) {

    if (!headersObj) headersObj =  parseHeaders(headers);



    if (name) {

        return headersObj[lowercase(name)] || null;

    }



    return headersObj;

}

④ congfig: 요청된 구성 객체
{

    method: "GET",

    url: "/api/user",
params: {id:5}
}

다음은 인스턴스입니다.
요청한 데이터를 span 탭에 넣습니다:
html:
<!DOCTYPE html>

<html ng-app = 'HttpGet'>

<head>

  <title>18.1 $http.get </title>

  <meta charset="utf-8">

  <script src="angular.js"></script>

  <script src="script.js"></script>

</head>

<body>

<div ng-controller = "dataController">

  <span>{{data}}</span>

</div>

</body>

js:
var httpGet = angular.module('HttpGet',[]);

httpGet.factory('getData',function($http,$q){

    return function(){

        var defer = $q.defer();

        $http.get('/api/user').success(function(data,status,headers,congfig){

            //console.log(status);

            //console.log(headers);

            //console.log(congfig);

            defer.resolve(data);

        }).error(function(data,status,headers,congfig){

            defer.reject(data);

        });

        return defer.promise

    }

});

httpGet.controller('dataController',function($scope,getData){

    $scope.data = getData()

});

* 다음 방법이 잘못되었습니다.
데이터는 비동기적으로 되돌아오기 때문에 $q의promise를 사용해야 합니다
var httpGet = angular.module('HttpGet',[]);

httpGet.factory('getData',function($http,$q){

    return function(){

        var newdata = '';



        $http.get('/api/user').success(function(data,status,headers,congfig){

            newdata = data;

        }).error(function(data,status,headers,congfig){

            newdata = data;

        });



        return newdata

    }

});

httpGet.controller('dataController',function($scope,getData){

    $scope.data = getData()

});

백엔드 node 코드:
var express = require('express');

var app = express();

app.use(express.static(__dirname+''));



var data = 'angularjs $http.get';



app.get('/api/user',function(req,res){

    res.send(data)

});



app.listen(3000);

전체 코드 주소: https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY/18.1%20%24http.get

좋은 웹페이지 즐겨찾기