If you are switching from Brackets to VS Code for your AngularJS development, the first thing you are going to miss is the live preview option. VS Code does not have a built in server that can be easily activated. While there are 101 ways to run a local server, none of them match the ease of use of Bracket’s live preview.

If you are a fan of the live preview option, it can be easily added to VS Code using the Live Server Extention.  This can be launched by a single click from the status bar (similar to Bracket’s live preview).

Lets try the extension using the simplest AngularJS app possible.Please install the extention and copy the below code to your index.html file.

<!DOCTYPE html>
<html ng-app="">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>

<body>
    <div>
        <p>User Name:
            <input type="text" ng-model="name">
        </p>
        Hi {{name}}
    </div>
</body>
</html>

 

Click on the ‘Go Live’ Button on the status bar and your live server will start immediately.

 

VS Code ‘Go Live’ Button on Status Bar
Live Preview

 

There are a couple of things you might want to fine tune such as the port number or the browswer to use. They can be changed in settings.

"liveServer.settings.host": "localhost",
"liveServer.settings.port": 10001,
"liveServer.settings.CustomBrowser": "chrome:PrivateMode"

 

3 thoughts on “Developing AngularJS Apps with VS Code”
  1. Cool. As long as you dont use any directives. If you gonna use ‘ng-include’ or even ‘ng-controller’ the whole extension gonna break showing ‘—>’.

Leave a Reply

Your email address will not be published. Required fields are marked *