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:

node -v

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

npm -v

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.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>
</body>
</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

npm install -g live-server

Manual way

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

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

live-server

The output should be like:

PS C:\Angular\AngularBasic> live-server
Serving "C:\Angular\AngularBasic" at http://127.0.0.1:8080
Ready for changes
GET /favicon.ico 404 3.692 ms - 24

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.

Categories