A Simple Single Page Application Using the AngularJS Framework

June 02, 2014

In a previous blog post, I gave a brief overview of the concept of Single Page Applications (SPA), along with a few of the more prominent frameworks that can be used to readily implement them.  In this post, I will introduce a very simple SPA that was developed primarily with the AngularJS framework and ASP.Net MVC.  Even though there are many aspects to AngularJS, this post will focus on the service of AngularJS that facilitates the navigation of screens within the single main page that encompasses the application.

The application I created is based off of the Adventure Works sample data available from Microsoft.  I created a new solution called “AdventureWorks,” and in the solution there are three projects: “AdventureWorks.Data,” “AdventureWorks.Repository,” and “AdventureWorks.Web.Site” (see screenshot below).  The data project implements an Entity Framework code-first model for accessing data from the AdventureWorks2012 database.  The repository project implements an abstraction layer for accessing data without having to directly access the data model in the data project directly.  Finally, the website project is where our web application is actually implemented.  From the screenshot below, you can see the traditional MVC project structure, including the “Controllers,” “Models", and “View” folders.  Even though I am using the MVC framework, I will make minimal use of it as the AngularJS framework will provide most the heavy lifting, especially with regards to navigation and data access.  For data, the application uses the AdventureWorks2012 database installed on an instance of SQL Server 2012 running locally on my development laptop.

Screenshot01 4 01 F24 D7 Rr1 A

As with any typical MVC application, the default route (i.e. the default page loaded on startup) is set in the RouteConfig class as shown below.  For this particular application, the default page will be returned by the “Startup” method of the “Home” controller.

23 Screenshot02 4 01 F24 D7 A

A closer inspection of the “Startup” view (below screenshot) will reveal very simple HTML markup.  The main thing to note is the “ng-view” tag in the div element.  This tag is actually a directive used by the AngularJS framework to mark the replaceable content served up the the application.  In essence, every time the application navigates to a different screen, the markup associated with that screen will be displayed within the containing HTML element.  In traditional ASP terms, the Startup view for this application will function similarly to a master page, with the content within it being variable based on where the user is navigating to.

Screenshot03 Thumb 01 F24 D7 A22

In order to use AngularJS in our application, the main framework files, along with our particular application files, are loaded in the shared layout page as seen in the screen shot below.  For this application, the “app.js” and “controller.js” scripts were created to define our application and its behavior from an AngularJS standpoint.

Final

Now it’s time to take a closer look how AngularJS  controls navigation within the application.  In the screenshot below is the main “app.js” file that defines the application within the AngularJS framework.  The first thing that occurs is the creation of the application module and a variable that represents it.  Afterward, routing is configured for the application by configuring the “$routeProvider” service.  When the user navigates within the application by clicking on URL hyperlinks, the AngularJS framework will intercept the commands, and will try to match the requested URL in the routing list as configured in the $routeProvider.  If a match is found, AngularJS will attempt to load the content represented by the URL into the HTML element containing the ng-view directive (i.e. our Home/Startup view).  For example, if the user clicks on a hyperlink representing the URL “http://localhost:54734/#/Product/List”, then AngularJS will request from the web server the HTML content represented by that URL.  In this case, the MVC component of our web site will serve up the view returned by the “List” method of the “Product” controller.  AngularJS will take the content returned and insert it into the ng-view HTML element.

Screenshot04 2 01 F24 D7 A20

Now lets run the application to demonstrate how AngularJS handles the navigation.  When the application is launched (without a specific page), the MVC framework will load the default route of Home/Startup.  This will in turn load the view returned by the Startup method of the Home controller.  The Startup view has no viewable markup; it only defines the boundaries of the replaceable content from the AngularJS point of view.  AngularJS, for its part, will try to load the content represented by its default route, namely “/Home/Menu". Thus, when the application first loads, the visible content will be that displayed will be represented by the “Home/Menu” MVC view.

Screenshot06 4 01 F24 D7 A19

From the main page, we can now navigate to the product list (see bottom of screenshot directly above for URL), by clicking on the Product List hyperlink.  When the hyperlink is clicked, AngularJS intercepts the command and match3w the route to the “/Product/List” entry in the $routeProvider configuration.  In turn, AngularJS will request the HTML content represented by this URL (i.e. the “List” method of the “Product” controller), and display this content within the ng-view HTML element.  The product list screen is displayed below:

Screenshot07 2 01 F24 D7 A15

In conclusion, AngularJS can be used to build Single Page Applications for web sites.  The primary component of AngularJS that facilitates the navigation of the application is the $routeProvider service.  There are many additional components of AngularJS that can be used to further build the functionality and behavior of your web application.

Information and material in our blog posts are provided "as is" with no warranties either expressed or implied. Each post is an individual expression of our Sparkies. Should you identify any such content that is harmful, malicious, sensitive or unnecessary, please contact marketing@sparkhound.com.

Meet Sparkhound

Review our capabilities and services, meet the leadership team, see our valued partnerships, and read about the hardware we've earned.

Learn How We Work

See how our Plan/Build/Run methodology drives real client success, and gain our team's perspectives on timely tech topics.

Engage With Us

Get in touch any of our offices, or checkout our open career positions and consider joining Sparkhound's dynamic team.