Implementing AngularJS in Visual Studio Code: A step-by-step guide

I have been proficient in working with ASP.NET for a number of years, which includes MVC, JavaScript, Visual Studio, and more.

Currently, I am tasked with handling a small project that has been developed using AngularJS. To begin debugging the application, I have installed Visual Studio Code. However, I am unsure about what needs to be included in the launch.json 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'
    ]);

Upon hitting F5, the debugger begins at the "angular.module()" method but then throws an exception when stepping through it.

> 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) The AngularJS application consists of app.js file & index.html file. What should be entered as the value for the "program" property in launch.json?

2) Is there any extension necessary to install for working with AngularJS?

javascriptangularjsnpmvisual-studio-code

Answer №1

If you're looking for a simpler way to run your AngularJS application in VSCode, I suggest bypassing the traditional launch.json method and avoiding the need for extensions altogether.

A convenient approach that I've discovered is by installing http-server through npm and utilizing it to serve your application hassle-free.

To get started, execute npm install http-server from the root directory of your project using a terminal window.

Subsequently, include http-server -o as part of the start script within your package.json file. This addition ensures that the served application will launch automatically in your browser with the -o flag. You can explore additional options provided here: https://www.npmjs.com/package/http-server

A sample package.json configuration might resemble the following:

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

Lastly, kick off your application by entering npm start in a terminal window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Method for randomizing div elements within table cells and a separate div element

I currently have 16 div elements: HTML <table id="table1"> <tr id="tr1"> <td id="divdrag" ondrop="drop(event)" ondragover="allowDrop(event)"> <div id="div_content1" draggable="true" ondragstart="drag(event)"><p id= ...

javascripthtml

Error message: The line chart in angular-chartjs is encountering an issue with the function t.merge not

I am currently working on implementing a line chart example from the following source: . However, I am encountering an error and would appreciate any guidance or pointers to resolve it. Here is the error displayed in the console. Below is the code snippe ...

javascriptangularjsangularjs-directivechart.jsangular-chart

Guide to converting raw Mysql fields into objects using Node.js

I have written a code to retrieve all the rows from the article table in MySQL, but I would like to represent this data in object and array format so that I can send it to endpoints. app.get('/article' , function(req , res){ var connec ...

javascriptmysqlnode.js

Typescript is throwing a fit over namespaces

My development environment consists of node v6.8.0, TypeScript v2.0.3, gulp v3.9.1, and gulp-typescript v3.0.2. However, I encounter an error when building with gulp. Below is the code snippet that is causing the issue: /// <reference path="../_all.d. ...

javascriptnode.jstypescriptgulp

Using a Function as an Argument to Return an Unnamed Object

There seems to be a common trend in JavaScript code where a function is passed as a parameter, which in turn returns an anonymous object. myFunction(function() { return { foo: 'bar' }; }); What benefits or reasons are there for u ...

javascript

The issue of Gimbal Lock in rotation within Three JS

It appears that the quaternion rotation in Three JS can still experience Gimbal Lock. To replicate the issue, follow these steps: 1) Go to the Three JS Editor. 2) Add a Cylinder and set the z value to 1.57 (the middle text box for rotation). 3) Try chang ...

javascriptrotationthree.jsquaternionseuler-angles

BoxHelper causes BoxGeometry to become enormous

UPDATE Upon further investigation, I discovered that the issue with the oversized box occurs specifically when I attempt to incorporate the HelperBox. To demonstrate this problem, I created a JSFiddle, where the second box's size remains unaffected. ...

javascript3dthree.js

Checking the validity of date inputs - microservice for timestamps

I'm encountering an issue while attempting to validate my date input. I've tried using moment js, but it seems there's a problem. The error message "date invalid" keeps popping up! Here is the code snippet: app.get("/api/timestamp/:date_s ...

javascriptnode.jsexpressmomentjs

Attempting to utilize the async/await method to retrieve a service, but unfortunately, the returned values from the second service are not populating my variables as intended

I am having an issue with my service where I retrieve a list from the server. The problem is that within this list, I need to make another service call to fetch logo images. Although the service call returns successfully, my list still remains empty. Can y ...

javascriptangular

Executing code upon the completion of jquery's slideUp() function

Is there a method to trigger the execution of html() only after the completion of slideUp()? <p class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor elit</p> $(".test").slideUp().html(""); I attempted using ...

javascriptjqueryhtmlslideup

Matching an element that contains a specific string in JS/CSS

I'm currently faced with an HTML file that's being generated by an outdated system, making it tricky for me to control the code generation process. The structure of the HTML code is as follows: <table cellpadding=10> <tr> ...

javascriptcssdom

I could use some assistance in comprehending the workings of mongoose

After successfully installing mongo and mongoose on my cloud 9, I encountered an error in the terminal that says: err Error: Cannot find module 'mongoose' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (m ...

node.jsmongodbnpm

Tips for adjusting the ng-disabled attribute of a form element from an external source with Javascript and ensuring it successfully applies

My AngularJS directive includes a form with form elements, and I am unable to modify the original markup or code. One of the form elements has an ng-disabled="some expression" attribute that I need to change after the page loads. To achieve this, ...

angularjs

What is the best way to turn an entire table into a clickable link that leads to a different HTML page?

I have created a table that I want to turn into a button linking to another page. The table's values need to be changeable based on data from a database, such as changing the parameter to pH and the value to 7. However, the button should redirect to t ...

javascripthtmlcss

Creating scalable React applications

Can you provide insights on the scalability of React Apps? What recommended approaches are typically employed to effectively handle and generate scalable states in web applications using Reactjs? * ...

javascriptreactjs

Expand the capabilities of a jQuery plugin by incorporating new functions or modifying existing ones

I have a task to enhance the functionality of a jQuery Plugin (https://github.com/idiot/unslider) by adding another public method. (function(){ // Store a reference to the original remove method. var originalMethod = $.fn.unslider; // Define a ...

javascriptjquerypluginsextendunslider

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

javascriptc#jquerystringrazor

Angular JS can customize the default HTML page on a select tag, offering users a

When the web page is loaded, I want to display the default tableView.html from the views folder. However, it is not working as expected. Interestingly, when I switch between "Table View" and "List View" in the dropdown menu, it works fine. I believe the ...

angularjs

Steps for navigating to a different view following successful authenticationIs there anything else

I'm currently working on a project using AngularJS with a PHP backend, focusing on creating an authentication feature. During testing, I noticed that when the password is incorrect, an error message is displayed. However, when the password is correct, ...

phpangularjsmysqliionic-framework

What is the best way to determine the total number of pages for posts

Hello there! I'm currently working on implementing an infinite scroll feature for a custom post type, but I'm stuck on how to obtain the max_num_pages and pass it to JavaScript. Below is my current implementation of the infinite scroll: containe ...

javascriptphpjqueryajaxwordpress