Projects

Creating a simple Single Page Application with AngularJS, Bootstrap and ASP.NET Web Api

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.

IC690875

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.

When the user requests the page first time, the HTML page is loaded, when the second request is made, the javascript functions (AJAX) in the client side will request data/next page from the server to load the next page. Then the new content will be updated inside a container in the main page. This is the high level idea of a SPA and how it works. Please go through various in-detail articles you can find in the internet.

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.

Startup1

Startup2

The folder structure would look like as follows:

Startup3

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.

ManageNuGetPackages

ManageNuGetPackages1

After AngularJS installation is complete, search and install AgularJS.Route and Twitter Bootstrap. AngularJS.Route package contains the PackageRouter service which will be used to bind each page and controller with the URL routes. Bootstrap is a javascript framework used to create responsive web pages, which will automatically adjust itself to look good on different screen sizes. There is a responsive grid that is the whole layout of the Bootstrap. We can add content in to that, and it will resize itself according to each screen size. There are predefined styles written for that in the bootstrap.css file. Other than that Bootstrap offers JQuery functionalities such as tool-tips and pop-ups.

ManageNuGetPackages2

Next, add a new HTML page (Index.html) and a new Javascript file (Index.js) to the project.

AddFiles1.jpg

Index.html will be the main page, that gets loaded for the first time when the application is requested. Inside the Index.html the other pages or content will be loaded. The Injex.js file will handle all the main javascript functionality, which is to load the secondary content inside the Index.html page.

Since we are using Bootstrap, AngularJS and JQuery in our application, we need to refer them in the main page, which is Index.html.

AddScriptFiles

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.

Views

Lets create the main layout. In the Index.html page, add the following code:

NoteDefiningMenus.jpg

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.

SPAPage1

SPAPage2

Now lets create the routing: wire-up which URL will route to which page and controller. In the Index.js add the following code:

IndexJSRouting.jpg

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.

CreatingAppModule1

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.

ng-viewdeclration.jpg

The new pages will load inside this ng-view tag in an asynchronous manner.

So far, we have created the main page, the javascript file that will control the user requests and the views that will be loaded with each route. Now lets create the controllers, which me mentioned when declaring the routes.

Create a new folder called ‘Controllers’ under the project and add javascript files for AddController, EditController, DeleteController and HomeController into that folder.

AddController

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.

AddView.jpg

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.

AddView1.jpg

There you go.. Hope you will try to create a SPA by yourself. Thank you for reading this blog.

hope for the best!!

Advertisements