Today I am going to write about how to create a simple Single Page Application (SPA) using AngularJS, Bootstrap and ASP.NET Web API.
First of all, what is a Single Page Application? Normally when a user, types a URL on the browser and searches for that, a request is sent to the server and a HTML page is returned as the response. When the user clicks a button on that page, another request is sent to retrieve another web page and that page gets loaded. These general flow keeps repeating for each user request. But in a SPA, the entire web page is loaded only for the first time, thereafter all the other content is loaded in the same HTML page.
This is an image I referenced from the internet. This will give you a better understanding of the page life cycle of normal web application vs a single page application.
Lets start with our project….
The front end will be developed using HTML5, AngularJS and Twitter Bootstrap. The data will be retrieved from an ASP.NET Web Api which will be self hosted.
I am using Visual Studio 2017 Community Edition. First create an ASP.NET ‘Empty’ web application, give any name you would like. Remember to not select any of the check boxes.
The folder structure would look like as follows:
Next we need to install AngularJS. In order to do so, right click on the project, select Manage NuGet Packages, search AngularJS and install the package.
Since we are using Bootstrap, AngularJS and JQuery in our application, we need to refer them in the main page, which is Index.html.
Now lets create the other pages that gets loaded, based on user actions. Create a folder called ‘Views’ in the project. After that add four new HTML files in to that folder named: Add, Edit, Delete and Home. Remember to delete the contents of these files, since we are going to write new code. Also since these pages will be loaded inside the Index.html page, no need of HTML declarations.
Lets create the main layout. In the Index.html page, add the following code:
Note that all the html elements have classes, which are defined in the bootstrap.css file. If you open the css file, you will be able to see the styling defined for them. Here we are defining a navigation bar with Add, Edit, Delete and Home pages. The <nav> tag is a HTML5 element that declares a navigation bar. But explicitly mentioning the role as navigation makes sure that any other technologies can also recognize this to be a navigation bar. The class “active” makes the Home page selected when loading. The # sign is used to identify the anchor part of the URL, that means the destination page. In SPAs, the URL does not change like a traditional web application, since the page does not reload. When the user clicks on these navigation buttons, only the anchor part will be added to the URL.
Now lets create the routing: wire-up which URL will route to which page and controller. In the Index.js add the following code:
In line 1, we are creating an angular module and passing the ngRoute module (which is an angular module for routing, that is used to navigate to page without reloading the entire page). A module in AngularJS is where all the modules (AngularJS or third-party) needs to be created, initialized and registered. Some example components are controllers, configs and filters. In the code in line 1, “SPAApp” is the module name and it would be the application name that needs to be referred in the Index.html page as well.
From line 3 – 5 has been done due to the following issue: https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52. I am not going to discuss that in this blog.
From line 7 to 28, we are defining the routing configuration of the application. The config method is to implement actions that needs to occur at the loading. $routeProvider is the AngularJS service contained in the ngRoute module, that will be used when routing the pages based on URLs. That has been passed as a dependency to the config method. From line 9 on wards, we are routing to different pages: when user is navigating to the ‘Add’ page, the Add.html page should be returned with the AddController attached to it. Same logic goes to the other three pages as well. If none of these routes does not match, load the Home page.
Even through we have written code for routing, they will not run, until the Index.js file is referred in the Index.html file just like all the other .js files.
Now you should be wondering where will all the new pages will load in the Index.html file. For that we need to declare the ng-view tag in the page. This angularjs element will declare the space, where the new pages will load.
The new pages will load inside this ng-view tag in an asynchronous manner.
An angularjs controller is where all the data of the application resides. Each controller can be assigned to different parts of the application and that part or container will be controlled by the attached controller. All the data and attributes of that specific container will be defined inside that controller. In line 1, we are declaring that the controller name to be ‘AddController’, The second parameter which is a function is the constructor of this particular controller. We have passed an object called $scope in to the function (Note the support of dependency injection in AngularJS.): $scope is the module or container that controller will control. It is possible to add any object to the $scope and that can be accessed from the respective container/module. Likewise we have added a property called message into the $scope and have given in to value. The same steps can be applied to all the other controller as well, remember to change the controller names and the message accordingly.
Next we will add the code to the views, so we can display the respective ‘message’ in each view.
In line 1, the ng-controller directive declares that the ‘AddController’ will hold that data of this div container and will control that. As mentioned earlier, the ‘message’ property added to the $scope of the AddController can be accessed in the way implemented in like 2. The same code can be applied to all the views, remember to change the controller name is attached to the ng-controller directive accordingly.
Now lets run the application.
There you go.. Hope you will try to create a SPA by yourself. Thank you for reading this blog.
for the best!!