How to create AngularJS Project in VS 2017 | Quick Guide
Creating and deploying AngularJs project/app without an IDE like Visual Studio is very hectic and time consuming task. VS-2017 really help us creating Angular Applications on the fly and help us saving our time and mind peace.
In this guide we will create a simple AngularJs application using Visual Studio 2017 Community Version (you can use Professional or Enterprise version too) and see how to deploy the app on localhost.
First open Visual Studio and press create new project, then select ASP.NET Web Application from Web section as shown in image:
Name the application whatever you want(i here entered AngularJSApp). After pressing OK another dialog box opens prompting about the template, select empty and press OK.
Your project will look something like the above after following the mentioned steps. After this, right click on your project name in solution explorer and select ‘Manage Nuget Packages…’, go to the Browse tab and enter angularjs in search bar which will show you a list of related libraries. Select AngularJS.Core by The AngularJS Team as shown in image.
Now a folder of scripts will be added automatically in your project which will contain angularjs library. Create a new index.html file in the project root location and Set As Start Page by right clicking on it.You can create the following project structure which has app folder on the root containing controllers, services, views (which will be simple html files) and app.js file,this architecture is clean, modular and widely used for Angular JS applications and you can extend it further to fulfill your needs.
Copy paste the following code for respective files:
app.js
var app = angular.module(‘demo’, []);demoController.js
app.controller('demoController', function ($scope) {$scope.Message = "Hello To AngularJS QuickStart";});
index.html
<!DOCTYPE html>
<html ng-app=”demo”>
<head>
<meta charset=”utf-8" />
<title>AngularJs Sample</title>
<script src=”Scripts/angular.min.js”></script>
<script src=”app/app.js”></script>
<script src=”app/controllers/demoController.js”></script>
</head>
<body>
<div ng-controller=”demoController”>
<h2>{{Message}}</h2>
</div>
</body>
</html>
The index.html file is a simple html file and the starting point of our angular application which loads the angular js library, module and controller scripts.You can see above that demo is our module’s name and demoController is the name of the controller.You have now successfully created the Angular JS App, hit Ctrl + F5 and Visual Studio will deploy it automatically on localhost so we don’t have to worry about that. Thanks for reading, Enjoy….
