A.I, Data and Software Engineering

Using VS code for AngularJS development

U
Visual studio code

AngularJS with Visual Studio Code is now preferable by many developers. VS code is a source code editor developed by Microsoft for WindowsLinux and macOS. It includes support for debugging, embedded Git control, syntax highlightingintelligent code completionsnippets, and code refactoring. It is also customizable, so users can change the editor’s themekeyboard shortcuts, and preferences. Visual Studio Code is based on Electron, a framework which is used to deploy Node.js applications for the desktop running on the Blink layout engine.

Why VS Code?

Visual Studio Code is a versatile source code editor. It is quite similar to Atom or Sublime. However, it is more flexible with many plugins which are accessible via the graphical user interface. It supports a number of programming languages and a set of features that may or may not be available for a given language, as shown in the following table. Many of Visual Studio Code features are not exposed through menus or the user interface. Rather, users can access them via the command palette or a .json file (e.g., user preferences). The command palette is a command-line interface. However, it disappears if the user clicks anywhere outside it or presses a key combination on the keyboard to interact with something outside it. This is true for time-consuming commands as well. When this happens, the command in progress is cancelled.

Get VS code here.

Get plugins for AngularJS development

Angular plugin

Install Node.js

Node.jsĀ® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Get Node.js here.

Check that you have node and npm installed

To check if you have Node.js installed, run this command in your terminal:

We can confirm that you have npm installed you can run this command in your terminal:

To access terminal from VS code, use “Ctrl + shift + p” then select debug console.

Create your first HTML with AngularJS

Use VS to open a Folder, create a new file named index.html.

Get a web server with npm

You have a couple of options to run your website. Personally, I prefer using lite-server or live-server for testing HTML.

Npm way

Manual way

Test your project: in the terminal of VS code, type:

The output should be like:

You can then open a web browser and type http://127.0.0.1:8080 to see the result.

Add comment

A.I, Data and Software Engineering

PetaMinds focuses on developing the coolest topics in data science, A.I, and programming, and make them so digestible for everyone to learn and create amazing applications in a short time.

Pin It on Pinterest

Newsletters

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

Petaminds will use the information you provide on this form to be in touch with you and to provide updates.