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为您提供了从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;

如果您尝试上述操作，则应该能够在log的{{1}}内部进行Service调用时进行IntelliSense。

如何使VS Code的Intellisense与AngularJS的注入服务一起使用？

1 个答案: