如何让 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

您提到尝试使用三斜杠指令，但不清楚（至少从您的 sn-p 中）您是否真的在使用 TypeScript。如果您不使用后者，那么如果您想在文件中改进 IntelliSense，则需要使用。

VS Code 为您提供您从 type definitions provided for AngularJS 看到的有限 IntelliSense。

简而言之，您需要：

• 将您的项目配置为使用 TypeScript（即设置 tsconfig.json）
• 安装 AngularJS 类型定义（即npm i --save-dev @types/angular）
• 以利用类型定义 (Todd Motto's guide provides some good guidance about this) 的风格编写 AngularJS 代码

以下是这种风格的一个非常简短的示例：

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

如果您尝试上述方法，您应该能够为来自Controller.ts 的Service 内部的log 调用获得IntelliSense。