Question

是否可以从.js文件中注入（匿名）提供程序到使用typescript编写的angular模块？我正在尝试编译在模块定义中失败的typescript。

故事

我有一个足够基本的模块，使用angular incript符号表示。我正在尝试将adalAuthenticationService提供商的定义添加到adal-angular.js的混合中。由于提供商不是.d.ts格式，因此我无法将其用作参考。目前，将提供商转换为.d.ts是不可能的。所以我留下了匿名注入选项（如果有这样的选项）。

控制器定义

module Temp.NewModule {
     interface IMainCtl {
         init(): void;
         b1(): void;
         b2(): void;
     }

     class MainCtl implements IMainCtl {
         hello: string;    
         txtb1: string;
         txtb2: string;

         // not sure what effect {private adalService: any} has as it doesn't seem to provide anonymity
         constructor(private $scope, private $log: ng.ILogService, private Api: IApi, private adalService: any) {
             var vm = this;
             this.init();
             // not sure if this actually does anything
             var adalService = adalAuthenticationService;
         }

         public init() {
             this.Api.getDataRx().subscribe((result) => {
                 this.hello = result.data.Name;
             });
         }

         public helloWorld() {
             this.$log.info('I accept your greeting');
         }

         public b1() {
            this.txtb1 = 'Now Button 1 works';
         }

         public b2() {
            // i am trying to call login function of adalService provider
            adalService.login();
         }
     }
     // i am trying to inject adalService provider here
     app.controller('MainCtl', ['$scope','$log','Api', MainCtl, adalService]);
 }

应用程序定义

module Temp {
    export module NewModule {
        export var serviceRoot: string = NewModule.serviceRoot || "";
        export var templatePath: string;
        export var servicesFramework: any;


        //Initalizes angular app
        $("html").attr("ng-app", "NewModule");
        export var app: ng.IModule = angular.module('NewModule', ['rx', 'ngRoute', 'AdalAngular'])
        .config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function($routeProvider, $httpProvider, adalProvider) {
            adalProvider
            .init ({
                tenant: 'tenant.onmicrosoft.com',
                clientId: 'client_id',
                extraQueryParameter: 'nux=1',
                //cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
            },
            $httpProvider
            );
        }]);

    }
}

基本上我试图绕过编译阶段，adalAuthenticationService被注入为依赖项，因为包含了adal-angular.js。因此理论上它应该在页面渲染后被拾取。

Answer 1

您的最后一行是错误的，您在控制器之后注入了adalService。此外，从adal文档中，该服务称为adalAuthenticationService。尝试类似：

 app.controller('MainCtl', ['$scope','$log','Api', 'adalAuthenticationService', MainCtl]);

完全支持匿名注入，您甚至不需要指定任何注入。如果您没有指定任何内容，它将被视为任何内容。如果您想利用IntelliSense，您只需在adal.d.ts文件中编写所需内容，而无需完成所有操作。

在你的b2功能中，你忘了这个：

public b2() {
    // i am trying to call login function of adalService provider
    this.adalService.login();
}

将匿名提供程序添加到用TypeScript编写的Angular模块中

1 个答案: