Emerging technologies like ASP.NET Web API and JavaScript frameworks like AngularJS makes it easy to design and build Single Page Applications (SPAs). From a career point of view, it is important to gain a working knowledge of these technologies, as more and more organizations are moving towards adopting these technologies to enhance their existing applications or build new ones.
Today we are starting a series of articles on how to build interactive web sites using ASP.NET Web API and the popular client side JavaScript library called AngularJS. The idea behind this series is learning various components of the Angular JS library and making developers comfortable in AngularJS. We will do some hands-on with the Angular JS library by building a simple Project Tracking Single Page Application throughout this series. This Project Tracking website will be used by a fictitious Organization and will allow employees of an organization to create a new project and add user stories. Once the user stories are in place, the project manager will assign the tasks to his/her team members. Team members will perform the task and update the progress of the task(s) on the web site. After this, the project manager can review the tasks online and provide comments on incomplete tasks.
This series will contain the following articles –
Although testing is a very important component in any AngularJS application, I have left it out for this series as AngularJS Testing will be covered as a separate article using tools like Karma and Jasmine.
For building the Project Tracking website, we will use the following technologies - HTML5, CSS3, Bootstrap, ASP.NET Web API, Entity Framework, AngularJS and SQL Server 2012. The FREE tools to build the Project Tracking website are – Microsoft Visual Studio Express 2013 for Web or the latest Visual Studio Community Edition AND SQL Server Express with Management Studio .
Let us dive into some concepts first.
What is a Single Page Application?
Single Page Application (SPA) is a web application which enhances the User Experience by using HTML 5 and AJAX. In SPA we load a single HTML page and based on the user request/interaction, we load the other HTML views in the same page, hence the name Single Page Application. To design a SPA, we have a couple of client side JavaScript libraries which we can make use of like AngularJS, Backbone.js, Durandal etc. You can adopt Model-View-Controller [MVC] or Model-View-ViewModel [MVVM] or the Model-View-* [MV*] pattern to build SPAs.
The execution of a SPA is as shown here:
The HTML page in SPA is a single page which is sent by the server when the application requests for it. Then based on the user interaction, the browser requests the other HTML pages called as Views asynchronously as a resource. To load or navigate between different views, most of the SPA technologies offers Routing services.
SPA can request data over HTTP from the server using REST services. However SPA can request not only data, but also HTML, CSS or JavaScript. Hence while working with SPAs, we use the term resources instead of data which can be anything as described above [Data, HTML, CSS or JavaScript].
Getting Started with AngularJS
First we will start with an introduction of AngularJS. We will be looking at some points mentioned here –
- Why Angular JS and what is AngularJS?
- AngularJS architecture
- Structuring Project Tracking website
- Build a simple web page with AngularJS
Why AngularJS?
It is obvious for many developers to have a question as to why should I choose AngularJS when I have a number of client-side JavaScript libraries out there. There are couple of reasons to choose AngularJS as a JavaScript library for building rich interactive websites. First thing is it is not just a simple JavaScript library with some fancy functions built into it. It is much more than that. You can categorize AngularJS as a MV* framework.
A MV* framework can be categorized into different design patterns like –
- Model – View – Controller
- Model – View – Presenter
- Model – View – ViewModel etc.
We will follow the Model – View – Controller pattern. Model is where you store your data. It could be in-memory data or data which can be fetched from databases like Microsoft SQL Server. View is what you want to display in the end users browser. Controller contains the logic and the state which you can make use of inside a view.
Using MVC as a design pattern, AngularJS provides a rich set of functionalities. For example –
- AngularJS provides rich data binding through two-way binding. For example, if you change the model which is referred in a view, the view gets automatically updated; and if you change the data in the view, the changes are auto reflected in models. Angular achieves two-way binding through a technique called as dirty checking which enables us to work with plain JavaScript objects without any magic wrappers around them
- We can design the templates in Angular JS for reusability
- AngularJS can make asynchronous calls to RESTful server APIs and presents the data to the Models. It returns promises which we can use to fetch the data.
- AngularJS also provides routing capabilities using which you can navigate between different views.
- AngularJS provides extensibility to HTML by providing Angular directives. Using directives, one can build one’s own components and in large business applications, directives make it possible to build our own DSL (Domain Specific Language)
- Angular code is fully testable. Any piece of AngularJS code can be tested using any testing library like Jasmine, QUnit, Mocha or any other test framework·
To see a number of applications designed using AngularJS, please visit https://builtwith.angularjs.org/
AngularJS Architecture
Let us briefly discuss the important components of AngularJS.
AngularJS Module – Module in AngularJS is like a container. It can contain different parts of your application like – Controllers, Services, Filters, and Directives etc. You can have one or more than one module depending on how complex your application is. There are a couple of advantages of using Modules in AngularJS –
- Bootstrapping of the application can be specified by module declaratively and hence they are easy to understand
- Modules are reusable
- Modules can be loaded in any order or even parallel because they delay execution
- Testing is easier and faster as you need to load only those modules which are needed by the app.
Configuration – needed to inject the constants and providers into configuration blocks. Config block is executed as soon as the module loads. The routing configuration is done in the configuration. It can also be used to configure modules and add HTTP interceptors.
Routing – When you design a large application, you cannot build the entire application using a single controller or a single view. You will need multiple controllers and multiple views. In such situations, you will have to do a navigation between different views using routing.
Controller – Controllers contains the logic and share state. Controllers are in-charge of your application and build the models for the views and directives. You can create multiple controllers for your application. Controller also provide commands for the view to act upon using number of events.
Views – View is nothing but the information you want to render to the end users browser. A view is also called as AngularJS compiled DOM.
Directives - Directives are extensions to HTML. They extend HTML instead of manipulating HTML. AngularJS provides a number of directives out-of-box. For example - ng-app, ng-controller, ng-view, ng-repeat etc. You can also build your own custom directives.
$Scope – A $scope is the glue between a Controller and a View. The controller generates the Model on $scope. It acts as a ViewModel for the view
Services – Services play a vital role in AngularJS. It is a component in AngularJS to perform a specific job like –
- Executing a reusable logic which can communicate over HTTP
- Performing computation on an algorithm
- To implement validation checks against data
- To invoke the local store stored in a browser or manipulate cookies
- Act as an abstraction layer between any external resource and application’s components
Two-Way Binding - AngularJS provides two-way data binding out-of-the-box. When model changes, the view reflects the changes without waiting for any specific event to be fired. Also, when view updates the model, the model gets updated automatically.
Structuring the Project Tracking Application
Now that we have gone through some concepts, we will move forward and design the database which will store the data of our Project Tracking website. To design the database and tables, open SQL Server Management Studio and execute the following script.
Setting up database environment
Use Master
GO
CREATE DATABASE ProjectTrackingDB
GO
USE ProjectTrackingDB
GO
CREATE TABLE Projects
(
ProjectID INT PRIMARY KEY IDENTITY,
ProjectName NVARCHAR(100),
StartDate DATETIME,
EndDate DATETIME,
ClientName NVARCHAR(100)
)
CREATE TABLE Employees
(
EmployeeID INT PRIMARY KEY,
EmployeeName NVARCHAR(100),
Designation NVARCHAR(100),
ManagerID INT,
ContactNo NVARCHAR(15),
EMailID NVARCHAR(30),
SkillSets NVARCHAR(100)
)
CREATE TABLE UserStories
(
UserStoryID INT PRIMARY KEY,
Story NVARCHAR(4000),
ProjectID INT REFERENCES Projects(ProjectID)
)
CREATE TABLE ProjectTasks
(
ProjectTaskID INT PRIMARY KEY IDENTITY,
AssignedTo INT REFERENCES Employees(EmployeeID),
TaskStartDate DATETIME,
TaskEndDate DATETIME,
TaskCompletion INT,
UserStoryID INT REFERENCES UserStories(UserStoryID)
)
CREATE TABLE ManagerComments
(
ManagerCommentID INT PRIMARY KEY IDENTITY,
Comments NVARCHAR(2000),
ProjectTaskID INT REFERENCES ProjectTasks(ProjectTaskID)
)
Insert dummy data into our tables for testing purpose -
INSERT INTO Employees VALUES(1000,'John Mike','Project Manager',null,'36672566290','john@projects.com','.NET Framework')
INSERT INTO Employees VALUES(1001,'Mark Andrus','Developer',1000,'3667233322','john@projects.com','.NET Framework, ASP.NET MVC')
INSERT INTO Employees VALUES(1002,'Johnny Richard','Developer',1000,'3667299999','johnny@projects.com','Angular JS')
INSERT INTO Employees VALUES(1003,'Maria Andrus','Developer',1000,'3667277777','maria@projects.com','jQuery, JavaScript')
INSERT INTO Employees VALUES(1004,'Richy Richard','Designer',1000,'3667277771','richy@projects.com','HTML 5, CSS 3')
INSERT INTO Employees VALUES(1005,'Honey Deskter','Designer',1000,'3667222222','honey@projects.com','HTML 5, CSS 3')
INSERT INTO Employees VALUES(1006,'Doketo Richy','Developer',1000,'36672512223','diketo@projects.com','.NET Framework, ASP.NET, ASP.NET MVC')
INSERT INTO Employees VALUES(1007,'June M.','Designer',1000,'3667278787','june@projects.com','HTML 5, CSS 3')
INSERT INTO Employees VALUES(1008,'Anjala Johns','Developer',1000,'3667298989','anjala@projects.com','.NET Framework')
INSERT INTO Employees VALUES(1009,'Austin A.','Developer',1000,'36672590009','auston@projects.com','SQL Server')
SELECT * FROM Projects
SELECT * FROM Employees
SELECT * FROM UserStories
SELECT * FROM ProjectTasks
SELECT * FROM ManagerComments
The database diagram is shown here:
There are five tables which we have created using the script. These tables are –
- Projects – To store the new project information with its start date and end date
- User Stories – Business Analyst will add the user stories
- Project Tasks – tasks will be assigned to all the developers by their project managers
- Employees – To store information about Employees of an organization
- Manager Comments – Manager can add comments on the tasks which are in progress.
Structuring the Website
Now let’s decide the structure of our web site and add required references to the structure and do the initial setup for our Project Tracking website. I will be using Microsoft Visual Studio Express 2013 for Web to build the web site or the latest Visual Studio Community Edition and will use NuGet packages to install the required library references into our website.
Open Visual Studio and create a new Web Application by choosing the ASP.NET Web Application with an Empty Project template.
Once you have created the project, add a couple of folders in our project and add scripts and CSS files as described in the following steps –
- Add an empty folder with the names CSS, Scripts, Images, Controllers, Services, Employees, Tasks, ProjectManagement, UserStories into our project.
- Add a style sheet file with the name Site.css into the CSS folder.
- Add Angular JS files, jQuery using NuGet package into our Scripts folder. This is shown in the image below.
- To make the website Responsive and look and feel better across multiple devices, I have downloaded the Bootstrap theme Amelia from http://bootswatch.com/# and added the CSS file into to my CSS folder. If you do not find Amelia in the themes, feel free to download any other theme of your choice.
After completing all the steps mentioned above, your Solution Explorer should look like the one shown here:
Build a simple web page with AngularJS
Now we will build a simple web page using AngularJS script. Add a Home.html page in the root of our website and design the page by adding the references to the scripts and CSS as shown here:
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/amelia.bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1>Welcome To Project Tracker</h1>
</body>
</html>
The output of this page is shown here:
Now let’s start modifying this project a bit and add angular support to the same. To use AngularJS in our website, we have already added an AngularJS script reference into our page Home.html. The code is shown above. Now we need to add a directive which is ng-app in to our HTML. This directive is an application level directive which AngularJS will look for and start evaluating the AngularJS expressions. This directive can be added into <HTML> tag or <body> tag or any other HTML tag like <div>. AngularJS will evaluate the HTML DOM which is under the HTML tag applied with the ng-app directive.
Let’s add ng-app directive in our HTML tag and write the following code in our HTML page –
<html ng-app>
Add the following code inside our body tag –
<p>Addition of Two Numbers (100+100) is - {{100+100}}</p>
The output of this code is shown here:
The double curly brackets are known as binding expressions. You can bind the data which may come from collections, web services or from databases using Angular expressions. Now let’s add ng-app directive to the <body> tag and you will see the same output.
Now that we have briefly used AngularJS, we will go ahead and design our first HTML page for the rest of the tutorial series. Replace the Home.html page with code shown here. I have added some more scripts and designed our Project Tracking website using Twitter Bootstrap. Please note that we will use this application for the entire series.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Project Tracking Home Page</title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<link href="CSS/amelia.bootstrap.min.css" rel="stylesheet" />
<link href="CSS/Site.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#Projects">Online Project Tracking Site</a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#Home">Home</a>
</li>
<li class="active">
<a href="#Projects">Projects</a>
</li>
<li class="active">
<a href="#UserStories">User Stories</a>
</li>
<li class="active">
<a href="#Employees">Employees</a>
</li>
<li class="active">
<a href="#Tasks">Tasks</a>
</li>
<li class="active">
<a href="#Comments">Manager Comments</a>
</li>
</ul>
<img src="../Images/linkedin.png" alt="Linked In" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
<img src="../Images/Twitter_bird_icon.png" alt="Twitter" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
<img src="../Images/facebook-icon.png" alt="Facebook" style="float:right;margin-right:10px;margin-top:1%;height:30px;width:30px" />
</div>
</div>
<div style="margin-left: 10%; margin-right: 10%;">
<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel" style="height: 250px;">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" style="margin-left: 15%; margin-right: 15%">
<h2>Manage Your Projects !!</h2>
<p>This site is used for managing projects. A single Tool to manage your project!!</p>
<br />
<br />
<p style="text-align: right"><a class="btn btn-primary">More Details</a></p>
</div>
<div class="item" style="margin-left: 15%; margin-right: 15%">
<h2>Add User Stories !!</h2>
<p>You can add different user stories as a Business Administrators. Your Stories will be form your project tasks.</p>
<br />
<p style="text-align: right"><a class="btn btn-primary">User Stories</a></p>
</div>
<div class="item" style="margin-left: 15%; margin-right: 15%">
<h2>Manager Comments !!</h2>
<p>Manager can add comments for the tasks which are going on under your project!!</p>
<br />
<br />
<p style="text-align: right"><a class="btn btn-primary">Manager Comments</a></p>
</div>
<div class="item" style="margin-left: 15%; margin-right: 15%">
<h2>Employees List !!</h2>
<p>
You can see all the employees details with their skill sets to assign the appropriate tasks and do efficient project management.
</p>
<br />
<p style="text-align: right"><a class="btn btn-primary">Let Me Try !!</a></p>
</div>
<div class="item" style="margin-left: 15%; margin-right: 15%">
<h2>Track Project Progress !!</h2>
<p>You can track Project Progress of all employees who are working under that project. You can also see the report for individual employee and his/her performance.</p>
<br />
<p style="text-align: right"><a class="btn btn-primary">Try It !!</a></p>
</div>
<div class="item" style="margin-left: 15%; margin-right: 15%">
<h2>Add New Projects !!</h2>
<p>Your company can add different projects into this site and manager can assign the tasks to the users for the project.</p>
<br />
<p style="text-align: right"><a class="btn btn-primary">Check Out Snaps!!</a></p>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
<div class="btn-group btn-group-justified" style="margin-left:2%;margin-right:2%;">
<div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; margin-right: 20px; float: left;">
<div class="panel-heading">
<h3 class="panel-title">Our Mission</h3>
</div>
<div class="panel-body">
Build the web application to manage the projects online through out the organization.
</div>
</div>
<div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; margin-right: 20px; float: left;">
<div class="panel-heading">
<h3 class="panel-title">Managers</h3>
</div>
<div class="panel-body">
The Managers can manage and track their project progress using this site.
</div>
</div>
<div class="panel panel-primary" style="width: 30%; height: 170px; margin-top: 3%; float: left;">
<div class="panel-heading">
<h3 class="panel-title">Purpose</h3>
</div>
<div class="panel-body">
Make developers learn and build the complete website using HTML 5, CSS 3, CSS Bootstrap and Angular JS.
</div>
</div>
</div>
</div>
<div >
<div>
<footer>
<div>
<a href="#">Site Map</a> |
<a href="#">About Us</a> |
<a href="#">Contact Us</a> |
<a href="#">Policy</a> |
<a href="#">Clients</a> |
<a href="#">Feedback</a>
</div>
©All Rights Reserved by DotNetCurry.
<address>
Ficticious Company,
Contact No - (222) - 5563369
</address>
</footer>
</div>
</div>
</body>
</html>
The output of our Home.html page is shown here:
That’s it for this article. In the next article, we will see how to Create REST Service using ASP.NET Web API to serve data to our views.
Download the entire source code of this article (Github)
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Pravinkumar, works as a freelance trainer and consultant on Microsoft Technologies. He is having over 10 years of experience in IT and is also a Microsoft Certified Trainer(MCT). He has conducted various corporate trainings on all versions of .NET Technologies including .NET, SharePoint Server, Microsoft SQL Server, Silverlight, ASP.NET, Microsoft PerformancePoint Server 2007 (Monitoring). He is passionate about learning new technologies from Microsoft. You can contact Pravinkumar at dabade[dot]pravinkumar [attherate] gmail[dot]com