Here, I’ve thought to write my thoughts about hands-on Angular. This is the first article, which tells you how to get your hands dirty with AngularJS, ASP.NET WEBAPI and SQL Server BookMySeat Application Tutorials.
This is the technology stack for BookMySeat library Application, as shown below-
![]()
I’ve designed a simple BookMySeat Library Application, where you will be familiarized with a few keywords & components, which you may be confronting in coming days. These keywords are shown below in the article-
| Component of Angular |
Description |
| Module |
Modules serve as containers to assist you to organize the code within your AngularJS Application. Modules can contain sub-modules. |
| $http |
$http is an AngularJS Service for reading the data from the remote Servers. |
| Angular ui.bootstrap |
<scriptdata-require="ui-bootstrap@*"data-semver="0.10.0"src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> |
| Services |
Services are a point, where you can put common functionality to an AngularJS Application. For example, if you would like to share the data with more than one controller then the best way is to promote the data to the Service and then make it available via the Service. Services extend the controllers and make them more globally accessible. |
| Routes Routing in Angular JS |
Routes allow us to determine the ways to navigate to the specific states within our Application. It also allows us to define the configuration options for each specific route, such as which template and controller to use. |
| View |
The view in AngularJS is what exists after AngularJS has compiled and rendered the DOM. |
| @scope |
$scope is essentially the “glue” between the view and controller within an AngularJS Application. It supports two way binding within an Application. |
| controller |
The controller is to define the methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view; they’re controlling. |
| Directive |
A directive is an extension of a view in AngularJS, which allows us to create custom, reusable elements. You can also consider the directives as the decorators for your HTML. Directives are used to extend the views and to make these extensions available for use in more than one place. |
| Route Config |
The config block of an AngularJS Application allows for the configuration to be applied before the Application actually runs. This is useful to set up routes, dynamically configuring Services and so on. |
| Dependency Injection |
How can we inject dependency in Angular controller and module? For this sample Application, we have injected $Log,$RouteParams,$modal ,Custom Services and many more. |
The Application which we are about to build consists of almost all the defined keywords, mentioned above and the initial look of the application is shown below-
![]()
There are a few points which we’ll cover in this Application. To make it complete, you can also reference how this Application will work from this BookMySeat Gif representation,
- The screenshot, shown above, is a sample form for BookMySeat Application .You can book your seat for the specific slot. You can cancel your seat also from the given slot.
- In the same way, we’ll try to integrate UI-bootstrap (modal Popup) to show which seat is booked by the user.
- We will focus on Custom Directive and Custom Service.
- Usage of $http to call to WebApi to populate the data on HTML page.
- Usage of dependency injection at the various levels, Load partial templates to MVC view page.
- There can be some various add ons, which you can do at your level after the completion of this Application like Email notification after booking the seat, cancel the seat, booking slot information and responsive Application .
- The structure of the BookMySeat Application is given below-
![]()
The basic life cycle of Angular app is given below-
![]()
Hope it’ll help you some day. Enjoy coding.