如何在 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 应用程序。

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

首先，从项目根目录中的终端窗口运行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 运行您的应用程序。