BT

Your opinion matters! Please fill in the InfoQ Survey!

Creating Single Page Apps With Angular.JS and ASP.NET

| by Jeff Martin Follow 6 Followers on Apr 04, 2014. Estimated reading time: 2 minutes |

A note to our readers: As per your request we have developed a set of features that allow you to reduce the noise, while not losing sight of anything that is important. Get email and web notifications by choosing the topics you are interested in.

Wednesday’s Build sessions included a presentation by David Catuhe and Jon Galloway on incorporating AngularJS into ASP.NET applications.  The resulting setup provides a way for developers to quickly build modern single-page web applications.   

Angular was created by Google and is now operated as an open source project that they support.  As its name implies, it is a JavaScript-based library that follows the Model View Controller (MVC) design pattern.  As Catuhe and Galloway explain, Angular uses dependency injection to power your ASP.NET application.  A single file, angular.min.js, is the only one needed to enable support.  (NuGet users can grab the latest version (beta) or the stable release.)

They point out that Angular usage is not an all-or-nothing approach, if you prefer to only utilize its functionality on selected portions of your page that is a supported possibility.  In any event, Catuhe and Galloway recommend creating an “apps” directory under your Scripts folder for your project to help organize your files.

An important word of caution about minification:  by default using minification on your app’s code will break as it will interfere with Angular’s dependency injection.  (The tutorial documentation for Angular has more details on this under the “A Note on Minification” section.)

To actually activate Angular within your webpage, add “ng-app” to your html tag:

<html ng-app … >

 This lets Angular know it should get ready to do something.  Angular uses $http for loading files by using its own lightweight version of jQuery.  If your project already has a copy of jQuery installed, Angular will instead use that version to be consistent. 

Catuhe and Galloway proceeded to demo their sample application, a single page application (SPA) based on displaying and storing information about Magic: The Gathering cards.  SPA’s use a view to build the UI, and Angular itself uses routing to define these views

Since deep links in Angular can conflict with MVC Routes, they suggest using a Catchall route:

 

routes.MapRoute(
                name: "Catch all route for SPA",
                url: "App/{*catchall}",
                defaults: new{
                                controller = "Home",
                                action = "Index"});

 

Another tip for displaying HTML.  If the HTML is generated from a view, proceed without difficulty.  However if the HTML is coming from a file (MyHTML.html) then use an IIS Rewrite rule to change the URL:

/myHTML.html -> /myHTML

To see their demo application in action, consult the presentation’s Channel9 page for more information.

 

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT