I am working with ASP.NET for last few years, so I'm comfortable working with MVC,JavaScript, Visual studio etc.
Now I have a small project that I need to take care of. It was developed in AngularJS. I have installed Visual Studio Code so I can start & debug the application. I understand I need to create a launch.json file, however I'm not sure what goes into this file.
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 file
// 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'
]);
When I hit F5, I see debugger starts at "angular.module()" method but then when I step through it throws an exception.
> 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)
Questions
1) AngulerJs application has app.js file & index.html file. What should be the value for "program" property in launch.json?
2) Do I need to install any extension for AngularJS?
Setup AngularJS Project in Visual Studio First, create new project by clicking on New Project link on start page. This will open New Project dialog box, as shown below. Select Web in the left pane and ASP.NET Web Application in the middle pane and then click OK.
Now open Visual Studio Code. Go to "File" > "Open Folder" and select "First-Angular-Project" from the "Desktop". Now in the "TERMINAL" run ng new Angular-Project-Demo. Whenever it prompts with something like "Would you like to add Angular routing? (y/N)" press "y" and hit "ENTER".
Using Angular in Visual Studio Code. Angular is a popular web development platform developed by Google. The Visual Studio Code editor supports Angular IntelliSense and code navigation out of the box.
I recommend not even using the launch.json
approach, and, you don't need extensions to run your AngularJS application in VSCode.
The easiest way I found is to install http-server
via npm and use it to serve your application.
First, run npm install http-server
from a terminal window in the project's root directory.
Next, add http-server -o
to the start script in your package.json file. (The -o
opens the served application in your browser automatically.) More options can be found here: https://www.npmjs.com/package/http-server
An example package.json might look like this:
{
"version": "1.0.0",
"name": "myAngular1App",
"private": true,
"devDependencies": {},
"scripts":{
"start": "http-server -o"
},
"dependencies": {
"http-server": "^0.11.1"
}
}
Finally, run your application with npm start
from a terminal window.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With