如何在Visual Studio Code中执行AngularJS

Question

过去几年我一直在使用ASP.NET，所以我很喜欢使用MVC，JavaScript，Visual Studio等。

现在，我有一个小项目需要照顾。它是用AngularJS开发的。我已经安装了Visual Studio Code，因此可以启动和调试应用程序。我知道我需要创建一个launch.json文件，但是我不确定该文件中包含什么内容。

launch.json

            {
            "version": "0.2.0",
            "configurations": [
                {
                    "name": "Launch",
                    "type": "node",
                    "request": "launch",
                    "program": "${workspaceRoot}\\manager\\angular\\js\\app.js",
                    "stopOnEntry": false,
                    "args": [],
                    "cwd": "${workspaceRoot}",
                    "preLaunchTask": null,
                    "runtimeExecutable": null,
                    "runtimeArgs": [
                        "--nolazy"
                    ],
                    "env": {
                        "NODE_ENV": "development"
                    },
                    "externalConsole": false,
                    "sourceMaps": false,
                    "outDir": null
                },
                {
                    "name": "Attach",
                    "type": "node",
                    "request": "attach",
                    "port": 5858,
                    "address": "localhost",
                    "restart": false,
                    "sourceMaps": false,
                    "outDir": null,
                    "localRoot": "${workspaceRoot}",
                    "remoteRoot": null
                }
            ]
        }

app.js文件

    // Declare app level module
    var main = angular.module('eng-im', [
        'ngAnimate',
        'ngRoute',
        'ngCookies',
        'toaster',
        'ui.router',
        'ui.bootstrap',
        'angularSpinner',
        'engrafa.directives',
        'engrafa.controllers',
        'rt.encodeuri',
        'searchbar',
        'base64'
    ]);

当我按F5键时，我看到调试器从“ angular.module（）”方法启动，但是当我逐步执行该调试器时，将引发异常。

> node --debug-brk=40967 --nolazy manager\angular\js\app.js 
Debugger listening on port 40967   
c:\code\manager\angular\js\app.js:32  
var main = angular.module('eng-im', [           ^
ReferenceError: angular is not defined   
        at Object.<anonymous> (c:\code\manager\angular\js\app.js:32:12)  
        at Module._compile (module.js:410:26)  
        at Object.Module._extensions..js (module.js:417:10)  
        at Module.load (module.js:344:32)  
        at Function.Module._load (module.js:301:12)  
        at Module.runMain [as _onTimeout] (module.js:442:10)  
        at Timer.listOnTimeout (timers.js:92:15)  

问题
1）AngulerJs应用程序具有app.js文件和index.html文件。launch.json中“ program”属性的值应该是什么？

2）我需要为AngularJS安装任何扩展程序吗？

Answer 1

我建议甚至不要使用这种launch.json方法，并且不需要扩展即可在VSCode中运行AngularJS应用程序。

我发现最简单的方法是http-server通过npm 安装并使用它来服务您的应用程序。

首先，npm install http-server从项目根目录中的终端窗口运行。

接下来，添加http-server -o到package.json文件中的启动脚本。（这会-o在您的浏览器中自动打开提供的应用程序。）更多选项可以在这里找到：https : //www.npmjs.com/package/http-server

一个示例package.json可能看起来像这样：

{
 "version": "1.0.0",
  "name": "myAngular1App",
  "private": true,
  "devDependencies": {},
  "scripts":{
    "start": "http-server -o"
  },
  "dependencies": {
    "http-server": "^0.11.1"
  }
}

最后，npm start从终端窗口运行您的应用程序。