How to easily integrate AngularJS with visual studio 2015

  • 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.
  • The Web API methods will communicate with the SQL Server database by using the Entity Framework:

    Currently this version of Visual Studio 2015 does not support automatic creation of model classes and controllers from a database yet.

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

    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:

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

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

  • Once you run the project you will be able to see the view in action:

    So we´ve seen that AngularJS can be perfectly integrated into Visual Studio 2015.

In light of some of the major changes occurring at the moment within Microsoft, we show you how to easily integrate AngularJS with Visual Studio 2015.

@DavidNishimoto: I am going to use angularjs for my open po web api

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.

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.

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

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:

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:

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

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

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:

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

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:

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!

How to easily integrate AngularJS with visual studio 2015

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.