如何在Visual Studio代碼中執行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運行應用程序。