in ASP.Net

Tips for using AngularJS in ASP.Net MVC

At Envoc I live in the .Net world and I personally find developing in Visual Studio quite nice (Web Essentials and Resharper take it to the next level). I am currently helping move a lot of our front-end work into the AngularJS realm and decided to share some of the things that might make the .Net developers life a little better.

Application Inception

While Angular is a framework for the modern Single Page App, I have found that a lot of our MVC applications call for a collection of these “ng-apps”. In this instance they typically don’t include the client side routing.

The Sample App

2014-07-09 12_42_44-CASM_Jobney.Casm.Web at master · justinobney_CASM

The image to the left is the file structure for a sample airplane scheduling app. There are three sections:

  Home (simple js) - A simple calendar showing flights
  Details (angular) - Information about a single flight
  Manage (angular) - A place for settings, pilots, etc...

Bundle Configuration

While asset bundling is agreat feature of ASP.Net, it is easy to get carried away. When I came on there were a lot of projects that just included all the js files for the entire application in a single ScriptBundle. This was one of the first places I set my sights.

I decided that a lot of the services would be shared, so they could go in their own Angular module and in their own ASP Bundle. Then each mini-app could get it’s own module and bundle. Lets take a look at the BundleConfiguration.cs file.

 

 

Then using the bundles, say in the manage app, it would look like this:

The App Setup

Now I know what you are thinking…

He didn’t include the ng-manage-app or ng-shared-services bundles. But instead spit out some partials?

Services Need Data And Data Needs Urls

As an ASP.Net MVC developer, you are probably used to letting the routing engine create urls for you when you need them. And why not? Who knows what crazy routing constraints the client/pm/other developers decided needed to be in your application. And with Razor helpers, this is pretty easy. Angular shouldn’t have to try hard to figure out those rules. So how do we combine these two worlds?

Such http. Many calls.

In the manage app we are going to need some data. When the situation calls for it, I don’t mind sending that data down with the app. I think I took this idea from John Papa or one of those PluralSight authors. Basically, I just use JSON.Net to serialize my dataset on the page. Let’s take a look at it.

(UPDATE)

You can download the source at https://github.com/justinobney/CASM

Need a hand?
  • Pingback: How could you become zero to hero in AngularJS? | Milap Bhojak()

  • marzieh

    Thanks for the professional sample. I liked the way you have managed JSON data communications and used razor inside javascript instructions. Actually I was looking for a good sample using angular in asp.net application. It seems to be a great one and I guess I need lots of time to learn from your sample. It seems to be too professional for me as a beginner!