Table of contents
AngularJS with Visual Studio Code is now preferable by many developers. VS code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. It is also customizable, so users can change the editor’s theme, keyboard 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
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.
<p>Name : <input type="text" ng-model="name"></p>
Get a web server with npm
npm install -g live-server
git clone https://github.com/tapio/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:
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.