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.
