AngularJs 및 Typescript를 사용하여 비동기 호출을 수행하는 방법

Question

이것은 매우 간단한 질문이지만 Javascript, Typescript 및 Angular에 익숙하지 않은 것처럼 보입니다. 대답을 찾을 수없는 것 같습니다.

저는 서버에 간단한 요청을하고 결과를 처리하려고합니다. 이것은 실제로 OAuth 인증 프로세스의 일부입니다. https://developers.google.com/accounts/docs/OAuth2UserAgent#validatetoken

$ http.get에 대한 많은 참조가 있지만 Typescript 내에서이를 호출하는 방법을 모르겠습니다. 또한 사람들이 JQuery 약속에 대해 이야기하는 것을 보았습니다. 그러나 이미 Angular를 사용하고 있다면 JQuery를 사용할 필요가 없어야한다고 생각합니다.

내 angular.d.ts 파일을 살펴본 결과 IHttpService를 사용해야하는 것처럼 보이지만 어떻게 이러한 인스턴스 중 하나를 인스턴스화합니까? 제네릭을 get 메서드와 함께 사용하려면 어떻게해야합니까? 이렇게하는 방법의 예가 좋습니다.

많은 도움을 주셔서 감사합니다.

Answer 1

각도와 함께 oauth를 구체적으로 수행하는 방법에 대해 조사하고 싶습니다. Google의 '각도 oauth'를 입력하면 좋은 출발점이되어야합니다. 첫 번째 결과는이 자습서 여야합니다.

http://devcenter.kinvey.com/angular/tutorials/how-to-implement-safe-signin-via-oauth

누군가가 이미 OAuth를 구현하고 유지 모듈로는 사용할 수있게 만든 가정하는 것이 안전합니다. 이러한 모듈을 찾는 것이 가장 좋습니다.

https://www.google.ie/search?site=&source=hp&ei=IPWWVOqZEePe7AbI8YH4Dg&q=angularjs+oauth+module&oq=angularjs+oauth+module&gs_l=mobile-gws-hp.12...2447.2447.0.3443.2.2.0.1.1.0.203.406.2-2.2.0.msedr...0...1c.2.60.mobile-gws-hp..1.1.88.3.KF2tzFFu2RI

타이프 라이터와 각도를 사용하여 비동기 enpoint 호출하는 방법에 대한 구체적인 편집 :

는 각도와 jQuery를 사용하지 마십시오을. JavaScript를 처음 사용하고 jQuery를 사용하지 않았다면 Angular와 함께 사용하지 않는 것이 가장 좋습니다. jQuery는 훌륭합니다. 그러나 Angular를 배우는 경우에는 사용하지 않는 것이 좋습니다.

각도로 표시된 컨트롤러 및 서비스는 프로토 타입 생성자입니다. 이것들은 TypeScript에서 클래스로 표현됩니다. 각도로 service() 메서드로 등록한 모든 클래스 또는 프로토 타입 생성자는 자동으로이라는 싱글 톤으로 등록됩니다.

예 컨트롤러에 대한

// this is a ts module 
// we put our code in here to not polute global scope 
// angular modules are different -- don't confuse them 
module app { 

    // we export the class so that we can access its API from 
    // tests. We don't ever want to directly new it from tests though. 
    // we should always use $injector.get('myService') to get the test instance. 
    export class MyService { 

     // We need to tell angular what service to inject. 
     // Using the $inject annotation is the cleanest way. 
     // Our $inject and constructor are on top of each other 
     // this way. We can see that they match 
     // As well, we use the type ng.IHttpService with on $http 
     static $inject = ['$http']; 
     constructor(private $http: ng.IHttpService) {} 

      getMyEndpoint() { 

       return this.$http.get('http://myendpoint.com/myendpoint'); 

      } 
    } 

    // here we register this class as a singleton by using the 
    // .singleton method. 
    angular.module('app').service('myService', MyService); 
} 

이 유사하다. 이 예제에서는 방금 만든 싱글 톤 서비스를 가져올 것입니다.

module app { 

    export class MyController { 

     data: MyData[]; 

     static $inject = ['myService']; 
     constructor(myService: MyService) { 

      myService.getMyEndpoint().then(
       (data) => { 
        this.data = data; 
       } 
      ); 
     } 

    } 
    angular.module('app').controller('MyController', MyController); 
} 

위의주의 사항은 $ 스코프를 컨트롤러에 전달하지 않습니다. 대신 서비스 호출의 결과를 클래스의 public 멤버에 넣습니다. 그런 다음 controllerAs 구문을 사용하여 뷰에서 액세스 할 수 있습니다. 범위 상속으로 인해 어려움을 겪으면서 $ scope를 컨트롤러에 전달하고 바인딩하는 것이 더 바람직합니다. 글로벌 스코프와 같은 단점이 있습니다. 결국에는 범위 충돌로 뛰어 들어갑니다. controllerAs 구문을 읽으십시오.

우리는 파스칼 케이스 MyController을 사용하여 컨트롤러를 등록하고 낙타의 경우 myServcie을 사용하여 서비스를 등록합니다. 이는 클래스가 컨트롤러로 등록 될 때마다 검색 될 때마다 클래스의 새 인스턴스가 반환된다는 것을 구별합니다. 서비스는 싱글 톤입니다. 각도로 한 번만 새롭게 나옵니다.하나의 인스턴스 만 반환됩니다.

테스트에 사용하기 위해 클래스 API를 내보내므로 (테스트시 또는 응용 프로그램의 어느 곳에서나 새로이 작성되지는 않음) 빌드시 클로저에서 응용 프로그램을 래핑하려고합니다. Uglifyjs는 우리를 위해 이것을 할 수 있습니다.

마지막으로, Google은 'basarat angular typescript'를 사용하여 @basarat의 각도 및 타이프 스크립트에 대한 많은 자습서를 읽고 볼 수 있습니다. 예를 들어이있다

Answer 2

, 나는 서비스 생성 방법 :

module MyApp.MyModule 
{ 
    export class SecuritySvc 
    { 
     private root : string; 

     static $inject = ["$http"]; 

     constructor(private $http: ng.IHttpService) 
     { 
      this.root = "api/"; 
     } 

     public getRoles() 
     : ng.IHttpPromise<IRole[]> 
     { 
      var url = this.root + "Security/Roles"; 
      return this.$http.get(url, { withCredentials: true }); 
     } 
     ... 
     // many others 
    } 
} 

우리는 각

angular.module("MyApp.MyModule") 
    .service("SecuritySvc", MyApp.MyModule.SecuritySvc) 

으로 그것을 주입 그리고 내 예를 들면, 다음과 같이 사용할 수 있습니다이 방법을 제어기

module MyApp.MyModule 
{ 
    export interface IMyScope extends ng.IScope 
    { 
     Roles: IRole[]; 
    } 

    export class MyCtrl 
    { 
     static $inject = ['$scope', "SecuritySvc", ...]; 

     constructor(public $scope: ng.IRootScopeService 
        , public SecuritySvc: SecuritySvc 
        , ...) 
     { 
      SecuritySvc 
       .getRoles() 
       .then((response: ng.IHttpPromiseCallbackArg<IRole[]>) => 
       { 
        var roles = response.data; 
        this.$scope.Roles = roles; 
        ... 

컨트롤러는 다음과 같이 정의됩니다. :