Yes, coffee with AngularJS! I know it's weird, but I started my journey of AngularJS with a cup of hot steaming coffee for breakfast. 
Surprisingly, the start was easy as opposed to my opinion about AngularJS and it motivated me to move one step further. The first step was to know about what AngularJS is and why I would prefer it over JavaScript or jQuery, which are perfectly adept at performing the same jobs.
Today, I decided to explore it further and see how I can actually implement MVC pattern with AngularJS.
Now, for some of us who are not acquainted with MVC, let me throw some light on what MVC is.
MVC is simply a way to divide your application into three parts, i.e., Model, View and Controller. Model is the application logic, i.e., database, Classes, etc., View is the HTML markup which is viewed by the end user and Controller is the mediator between View and Model. Or, we can say that Controller basically helps to communicate between the two, Model and View.
I find theory pretty boring, so let’s check out some practical implementation of it using AngularJS.
Let’s think of a very basic scenario wherein you need to display a list of Orders. You can easily display it by creating a <table> tag and then, add <tr> tags for each order to be displayed. But, if I have 100+ records then, being a lazy programmer, I would not want to put so much effort into writing the HTML markup of the table and let’s not forget how clumsy it would look in the end.
Now, let me show you how you can easily do it with AngularJS.
The best practice for creating a large and scalable application is to divide it into modules. Yes, break them so that you handle them easily. So, how do we create modules in AngularJS ? Actually it's quite simple, you just need to use built-in module method like this:
var app = angular.module("MyApp", []);
Here, you are defining a module of your application and the empty array ([]) denotes that this module is not dependent on any other module.
Like I mentioned earlier, you have Models that represents the classes or databases used in the application. Let’s create a model, i.e., Order class for our application:
function Order(data) {
this.ID = data.ID;
this.Company = data.Company;
this.Name = data.Name;
this.Amount = data.Amount;
};
Now, you need to have some data for displaying so we will be using Controller for it. You can define the controller using the ‘app’ module (Remember!! We created it a min ago!) like this:
app.controller("MyController", function ($scope) {
…
}
Here, the first argument is the name of the Controller which can be any relevant name. The second argument is ‘$scope’ i.e., the most important element of an AngularJS application.
You must be thinking what it is and why is it important?
$scope can be defined as the binding element or a glue between the controller and View. In simple terms, everything you define using this variable in the controller will be accessible to your view. So, be careful while using it.
Since you need to display a list of orders, you can create an array containing the objects of Order class (using $scope object) so that the same can be available in the HTML markup. The code would be:
app.controller("MyController", function ($scope) {
$scope.orderList = [
new Order({ ID: "ANATR", Company: "Ana Trujillo Emparedados ",
Name: "Ana Trujillo", Amount: 8900 }),
new Order({ ID: "ANTON", Company: "Antonio Moreno Taqueria",
Name: "Antonio Moreno", Amount: 4500 }),
new Order({ ID: "AROUT", Company: "Around the Horn",
Name: "Thomas Hardy", Amount: 7600 }),
new Order({ ID: "BERGS", Company: "Berglunds snabbkop",
Name: "Christina Berglund", Amount: 3200 })
];
});
Note: You don’t need to hard code the values, you can make an AJAX call and get the data from your database. I chose to hard code them just to show you the concept.
So, you have Model as Order class, Controller as MyController and now, let’s create the View:
<body ng-controller="MyController">
<table>
<thead>
<tr>
<th>ID</th>
<th>Company</th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orderList">
<td>{{order.ID}}</td>
<td>{{order.Company}}</td>
<td>{{order.Name}}</td>
<td>{{order.Amount}}</td>
</tr>
</tbody>
</table>
</body>
Observe that you don’t need to create <tr> tag for every row manually because it is being done by ‘ng-repeat’ directive for you. 
The ‘ng-repeat’ directive will iterate for each item in the collection or the array and will create <tr> tags itself.
Run the above code and you will see that a table is created with all the rows defined in the orderList:
This looks very boring to me, so to make it little interesting for you guys, I will be adding a Search functionality. In JavaScript/jQuery, you might choose to perform the following operations to implement it:
- Access the
search textbox on button click - Get the text
- Compare it with table’s data
- Hide the remaining rows
But, in AngularJS, you just need to add a filter directive, i.e.,
Search : <input type="text" ng-model="filterText"/>
<tbody>
<tr ng-repeat="order in orderList | filter: filterText">
<td>{{order.ID}}</td>
<td>{{order.Company}}</td>
<td>{{order.Name}}</td>
<td>{{order.Amount}}</td>
</tr>
</tbody>
This ‘filter’ directive will search for the rows on key press and would display only relevant rows. You don’t believe it, then check out this video showing the same:
So, I was able to display a list of orders, and also implement search functionality in it. But still, the table does not look very impressive and does not have functionalities like sorting, grouping, filtering for the end users. In the next part, we would see how we can change the UI and implement all these functionalities with minimal code.
I surely couldn’t handle all this over a cup of coffee. But two would have been sufficient, I guess!
CodeProject
