如何让 VS Code 的 Intellisense 与 AngularJS 的注入服务配合使用？

Question

因此，我试图让 Visual Studio Code 为我的 AngularJs （不是 Angular）应用程序的服务提供智能感知。我设法获得了角度的标准类型（现在当我输入“角度”时，它会建议诸如模块等之类的东西）。这很有效，而且很棒，但是我找不到一种方法让它与我的服务（或工厂）一起工作。我知道，对于 IDE 来说，计算通过依赖注入等方式产生的代码并不容易。

但是当我的控制器和它使用的服务都在同一个 JS 文件中时，它似乎工作正常！我遇到的唯一问题是我的应用程序太大，无法全部放在一个 JS 文件中，一旦我将代码拆分到多个文件中，它就会失败。

请注意，我尝试使用“三斜杠指令”（///），但这没有帮助。 我一整天都在为此烦恼，非常感谢任何帮助。

代码示例：

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', 'test',
    function ($scope, test) {

        $scope.test = test.word; //TRY TYPING 'test.' --> want to have intellisense suggest 'word'

}]);
//PUT THE BELOW IN ANOTHER FILE AND INTELLISENSE DOES NOT SHOW 'word'
app.service('test', [function(){
    /**
     * @type {string}
     */
    this.word = "balls";
    /**
     * @function
     * @param {string} variable
     */
    this.getLower = function (variable) {
        return variable.toLowerCase();
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <p class="lead">{{test}}</p>
  </div>
</div>

Answer 1

您提到尝试使用三斜杠指令，但不清楚（至少从您的代码片段来看）您是否真的在使用 TypeScript。如果您不使用后者，如果您想在文件中改进 IntelliSense，则需要使用后者。

VS Code 为您提供了有限的 IntelliSense，您可以从为 AngularJS 提供的 类型定义中看到。

简而言之，您需要：

• 将您的项目配置为使用 TypeScript（即设置

  tsconfig.json

  ）
• 安装 AngularJS 类型定义（即

  npm i --save-dev @types/angular

  ）
• 以利用类型定义的风格编写 AngularJS 代码（Todd Motto 的指南对此提供了一些很好的指导）

这是这种风格的一个非常简短的例子：

// Service.ts
export default class Service {
    constructor() {}
    log(message: string) {
        console.log(message);
    }
}

// Controller.ts
import ng from 'angular';
import Service from './Service';

export default class Controller implements ng.IController {
    static $inject: string[] = ['Service'];
    constructor(private service: Service) {}
    $onInit() {
        this.service.log('Hello, world!');
    }
}

// App.ts
import angular from 'angular';
import Controller from './Controller';
import Service from './Service';

export const angular
    .module('app', [])
    .service('Service', Service)
    .controller('Controller', Controller)
    .name;

如果您尝试上述操作，您应该能够对来自

log

的

Service

内的

Controller.ts

调用进行 IntelliSense。

Answer 2

参加聚会很晚了：我有一个 AngularJS (1.8.2) 遗留项目，最近决定稍微重构一下代码，以达到教育目的和个人挑战。

我已经能够以某种方式让它发挥作用，即使我不确定这是正确/最好的方法，“它就是有效”。

您必须在专用文件中定义自己的服务（在我的例子中决定创建一个特定的模块）：

coreModule.js

var coreServiceModule = angular.module('core', [<optional deps>]);
    class CoreClass {
        constructor(<optional deps>) {
            this.optional = optional;
        }
        method1 = function(){.....}
        method2 = function(){.....}
    }
    function CoreService(<optional deps>) {
        var instance;
        return {
            /**
            * @returns {CoreClass}
            */
            getInstance: function () {
                if (instance == null) {
                    instance = new CoreClass(<optional deps>);
                    // so that it's not possible to call its constructor once instantiated
                    instance.constructor = null;
                }
                return instance;
            }
        }
}
coreServiceModule.service('coreService', CoreService);

然后在实际的组件文件中，您必须注入服务，并且非常重要，将其附加到组件本身： myComponent.js

var myApp = angular.module('myApp', [
                'core' // the module defined above
    ]);
    myApp.controller('myAppController', ['coreService', function(coreService){

    // VERY VERY IMPORTANT FOR INTELLISENSE TO WORK
    let $ctrlMyApp = this;
    /**
    * @return {CoreClass} the return type
    */
    $ctrlMyApp.coreService = function(){
        return coreService.getInstance();
    }

    // this way Intellisense will suggest methods defined inside CoreClass class of coreModule.js
    $ctrlMyApp.coreService().//here you'll find class methods suggestions
}]);

非常欢迎更好的实施！ 希望它也能帮助你，6年后，遗留代码的未来程序员<3