BT
x Your opinion matters! Please fill in the InfoQ Survey about your reading habits!

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

by Jeff Martin on Apr 04, 2014 |

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.

 

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

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT