Javascript 如何使用AngularJs和Typescript进行异步调用

这似乎是一个非常简单的问题，但由于不熟悉Javascript、Typescript和Angular，我似乎找不到答案（我已经看过了，相信我）

我只想向服务器发出一个简单的请求并处理结果。这实际上是OAuth身份验证过程的一部分：

我找到了很多对$http.get的引用，但我不确定如何从Typescript中调用它。 我还看到人们谈论JQuery承诺，但我相信如果我已经在使用Angular，我就不需要使用JQuery

我已经查看了angular.d.ts文件，看起来我应该使用IHttpService，但是如何实例化其中一个呢？如何将泛型与get方法一起使用？ 举个例子来说明如何做到这一点会很好

---

非常感谢您的帮助。

您想研究一下如何使用angular实现oauth。在谷歌输入“AngularOAuth”应该是一个很好的起点。第一个结果应该是本教程

可以安全地假设有人已经实现了oauth，并将其作为维护模块提供。最好是寻找这样一个模块

编辑特定于如何使用TypeScript和Angular调用异步enpoint：

不要将jQuery与Angular一起使用。如果您是JavaScript新手，并且没有使用过jQuery，那么最好不要将其与Angular一起使用。jQuery很棒。但是如果你正在学习，最好不要使用它

Angular中的控制器和服务是原型构造函数。它们在TypeScript中表示为类。在angular中使用

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);
}

请注意，上面我们没有将$scope传递给控制器。相反，我们将服务调用的结果放在类的公共成员上。然后，我们可以使用controllerAs语法在视图中访问它。这比将$scope传递到控制器并绑定到控制器更可取，因为它们会受到范围继承的影响。它们与全局作用域具有相同的缺点。您最终将遇到范围冲突。阅读controllerAs语法

您会注意到，我们使用pascal case

MyController

注册控制器，使用camel case

myServcie

注册服务。这是为了区分当类注册为控制器时，每次检索时都会返回它的新实例。服务是单身人士。它只有一次由angular更新。只返回一个实例

因为我们导出类API以用于测试（但不会在测试中或应用程序中的任何地方更新），所以我们希望在构建时将应用程序封装在一个闭包中。Uglifyjs可以为我们做到这一点

---

最后，谷歌“basarat angular typescript”阅读并观看@basarat的angular和typescript教程

有一个例子，我是如何创建服务的：

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
    }
}

然后像这样使用它，例如在我的控制器中

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;
                    ...

---

我相信这些都是很好的参考资料，但是OP的问题根本不是关于OAuth的，OP试图实现OAuth。最好看看如何使用Angular实现这一点，而不是告诉OP只使用$http服务。谢谢你的回答，但是我想要更多关于如何使用angular和Typescript的建议，而不是关于oAuth的专门帮助。我确信有一个模块可用于此，但我将此作为一种学习经验，以适应一些新技术。我以前用其他语言实现过OAuth，所以这是一个很好的学习方法。因此，您不需要使用特定于typescript的$http服务。您确实希望确保在项目中具有angular.d.ts类型定义，以便可以在注入中使用ng.IHttpService接口。使用TS，您应该将控制器和服务定义为类。如果我上了电脑，我会尝试用例子更新我的原始答案。非常感谢。我计划稍后再讨论依赖注入，但如果不全力以赴，似乎很难使用任何依赖注入。我熟悉IOC和构造函数注入，因为我在日常工作中使用带Flex的欧芹。如果您是javascript新手，并且想使用angular，我建议您不要在开始时使用typescript，因为您将很难找到使用typescript的演示和示例。因为TypeScript是Javascript的一个子集，所以首先学习Javascript部分非常感谢。我希望我能把这两张海报都标为答案，但另一张海报更详细了一点，确实是先回答的。如你所愿。我的答案从一开始就是完整的，而另一个后来在我的基础上扩展。。。无论如何祝你好运，使用

Typescript

。这就是路。

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;
                    ...

angular.module('MyApp.MyModule')
    .controller('MyCtrl', MyApp.MyModule.MyCtrl);