How to easily integrate AngularJS with Visual Studio 2015

Categories: Software Product Development |

In light of some of the major changes occurring at the moment within Microsoft, the forthcoming release of Visual Studio 2015, along with .NET 2015, promises to be particularly exciting.

Here at Belatrix we wanted to start preparing for the upcoming version (currently available as a preview version which you can download here), and as a result we decided to try to integrate AngularJS with Visual Studio 2015.

For those not familiar with it, AngularJS is an open source web application framework, whose popularity is growing at an exponential rate. It is particularly attractive given the framework is relatively easy to learn, and is relatively easy to integrate with existing applications.

So without further ado, let´s delve into the key steps and find out how easy it really is.

Step By Step Guide To Integrating AngularJS With Visual Studio 2015

The development environment of Visual Studio 2015 is very similar to Visual Studio 2013. When you choose to create an “ASP .NET VNext Web Application” project, you can see a “new folder” structure.

ASP .NET VNext Web Application

Notice that the Web.config file does not appear anymore. Instead, there is a config.json file where the default database connection string is set. Another file that shows up on the structure is “project.json”; this file is used to configure the current solution packages. For instance, I will add the “angularjs” package in the solution. This can be done by simply adding a new entry into the project.json file and saving it. The package will be restored

Angular JS Package

AngularJS Sample

In this sample I will create a view that supports CRUD operations against a database table. The CRUD operations will consume RESTful ASP.NET Web API methods by using the AngularJS $http object. Also the UI behavior is being taken care of by an AngularJS module. The Web API methods will communicate with the SQL Server database by using the Entity Framework:

Angular JS Sample

Currently this version of Visual Studio 2015 does not support automatic creation of model classes and controllers from a database yet. So I will do these steps manually.

The following are all the steps involved in the example:

  1. Creating a new table in the project’s database.
  2. Creating a new model.
  3. Creating a new web API controller.
  4. Creating a new AngujarJs module.
  5. Create a new view.

In this article I will focus on the last two steps, since this is the main objective.

 

Creating an AngularJS Module

I will create an angular module that supports the Web API Controller:

Angular JS Module

The file student.js should be located inside the folder /wwwroot, created inside of the solution folder structure.

Inside this JavaScript file, the implementation of the CRUD functions is very straight forward:

CRUD functions

 

Creating a view

Finally we need a view in order to show the results, so I’ll create a view and add the following content:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<h2>Students</h2>
@{ ViewBag.Title = "StudentView"; }
<div class="container">
 
<strong class="error">{{ error }}</strong>
<div id="mydiv" data-ng-show="loading"><img class="ajax-loader" src="https://lh6.googleusercontent.com/-C5F73gXUSKc/VF_PE4bXXuI/AAAAAAAAAHs/dxOQiUahfFU/s2048/ajax-loader.gif" alt="" /></div>
<p data-ng-hide="addMode"><a class="btn btn-primary" data-ng-click="toggleAdd();">Add New</a></p>
 
<form style="width: 600px; margin: 0px auto;" name="addstudent" data-ng-show="addMode"><input required type="text" data-ng-model="newstudent.FullName" /><label>Address:</label><input required type="text" data-ng-model="newstudent.Address" /> <input required type="text" data-ng-model="newstudent.Course" /><label>Notes:</label><input required type="text" data-ng-model="newstudent.Notes" />
<table style="border-spacing: 10px; border-collapse: separate;">
<tbody>
<tr>
<td><label>Full Name:</label></td>
</tr>
<tr>
<td><label>Course:</label></td>
</tr>
</tbody>
</table>
<input class="btn btn-primary" type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addstudent.$valid" /> <input class="btn btn-primary" type="button" value="Cancel" data-ng-click="toggleAdd()" />
 
</form>
<p data-ng-hide="student.editMode">{{ student.FullName }}</p>
<input type="text" data-ng-show="student.editMode" data-ng-model="student.FullName" />
<p data-ng-hide="student.editMode">{{ student.Address }}</p>
<input type="text" data-ng-show="student.editMode" data-ng-model="student.Address" />
<p data-ng-hide="student.editMode">{{ student.Course }}</p>
<input type="text" data-ng-show="student.editMode" data-ng-model="student.Course" />
<p data-ng-hide="student.editMode">{{ student.Notes }}</p>
<input type="text" data-ng-show="student.editMode" data-ng-model="student.Notes" />
<p data-ng-hide="student.editMode"><a data-ng-click="toggleEdit(student)">Edit</a> | <a data-ng-click="deletestudent(student)">Delete</a></p>
<p data-ng-show="student.editMode"><a data-ng-click="toggleEdit(student);save(student)">Save</a> | <a data-ng-click="toggleEdit(student)">Cancel</a></p>
Full NameAddressCourseNotes
<table class="table table-bordered table-hover" style="width: 800px;">
<tbody>
<tr>
<th>Id Number</th>
</tr>
<tr>
<td><strong data-ng-hide="student.editMode">{{ student.StudentId }}</strong></td>
</tr>
</tbody>
</table>
<hr />
 
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script><script src="~/Scripts/app/Student.js"></script>

Notice that the last two lines are referencing both the AngularJs library and the student.js module.

And that is pretty much it. Once you run the project you will be able to see the view in action:

Angular JS Project View - part 1

Angular JS Project View - part 2

So we´ve seen that AngularJS can be perfectly integrated into Visual Studio 2015. Even while many of its features are still under development, Visual Studio 2015 is already in a fairly stable stage. I recommend you give it a try!