当前位置: 首页 > 面试题库 >

如何使用不会污染全局范围的TypeScript类定义AngularJS服务?

燕博文
2023-03-14
问题内容

我正在使用AngularJS和TypeScript。我想使用Typescript类实现AngularJS服务,如下所示:

class HelloService {
    public getWelcomeMessage():String {
        return "Hello";
    }
}

angular.module('app.services.helloService', []).factory('helloService', () => {
    return new HelloService();
});

这将编译为以下javascript代码:

var HelloService = (function () {
    function HelloService() {
    }
    HelloService.prototype.getWelcomeMessage = function () {
        return "Hello";
    };
    return HelloService;
})();

angular.module('app.services.helloService', []).factory('helloService', function () {
    return new HelloService();
});

这用变量HelloService污染了全局名称空间,我显然不希望这样做。(我使用Chrome的控制台验证了HelloService是一个对象。)如何解决/避免此问题?

我尝试了明显的方法:

angular.module('app.services.helloService', []).factory('helloService', function () {
    class HelloService { ...} 
    return new HelloService();
});

但这给了我一个编译错误(“意外令牌;预期为“语句”。”)。

我能想到的一种可能的解决方案是以某种方式使用TypeScript的导入和导出,而后者又将使用RequireJS。这可能会将HelloService包装在定义函数中,从而避免HelloService污染全局范围。但是,我现在不想在AngularJS应用程序中使用RequireJS,因为我认为AngularJS对于我的使用已经足够了,并且增加了复杂性。

所以,我的问题是,如何使用不会污染全局范围的TypeScript类定义AngularJS服务?


问题答案:

我应该提供我实际上结束的工作:

module MyModule {
    export class HelloService {
        public getWelcomeMessage():String {
            return "Hello";
        }
    }

    angular.module('app.services.helloService', []).factory('helloService', () => {
        return new HelloService();
    });
}

这样我可以用

return new HelloService();

代替

return new MyModule.HelloService();


 类似资料:
  • 现在遇到一个项目,uniapp开发的微信小程序,之前的所有页面都没有使用scope将css样式私有化,导致css属性全局污染了,现在要开发后续的功能,如何在后续的开发中避免之前css的样式污染? 之前开发的内容不能使用scope将css私有化,因为一旦私有化可能会对某些页面造成影响,现在的情况就是之前的内容不能动,在此基础上开发。 目前想到的办法是在后续开发的功能中,所有的css类名名全部使用当前

  • 我用global.d.ts定义全局变量: 但是在执行main.ts的时候 报错:

  • 问题内容: 我想自定义HTML5中范围输入类型的外观,使其看起来像进度条。我尝试使用CSS类应用一些常见的CSS属性,但似乎它们不起作用。 谁能指导我如何自定义它? 问题答案: 编辑 :如今所有主要浏览器都支持 <进度> 输入[类型=’范围’ 因此, 您应该使用这两个方法之一,如其他答案中所述 ,这不再是公认的答案。 的是非常新的,您已经尝试使用CSS对其进行自定义。:) 我不会尝试这样做有两个原

  • 问题内容: 如何从其父范围调用在子范围中定义的方法? http://jsfiddle.net/wUPdW/ 问题答案: 您可以从父母到孩子使用: 工作jsfiddle:http : //jsfiddle.net/wUPdW/2/ 更新 :还有另一个版本,耦合性更低,更易于测试: jsfiddle:http : //jsfiddle.net/uypo360u/

  • 我找到了一些像这样的向导http://www.mackhankins.com/blog/defining-your-own-helper-classes-in-laravel-4但这并不是我真正想要的,因为我希望能够使用函数修改不是类成员的值。 我有很多正则表达式函数,如果字符串与模式匹配,它们将修改字符串并返回修改后的字符串。我希望能够调用这些函数,就好像它们是在php函数中构建的一样。这是我过

  • 为了更好地掌握AngularJS,我决定使用其中的一个示例,特别是简单地在Todo-example中添加一个“完整”的屏幕,当用户输入了5个todo,它使用一个switch-case切换到另一个div。代码可以在http://jsfiddle.net/fwchu/1/,如果有用的话。 但是,似乎每个switch-case都有自己的作用域($scope.todotext不可用),但是在本例中,可以从