Click here to Skip to main content
13,508,222 members
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 5 Mar 2014

Coffee with AngularJS – Part 2

, 5 Mar 2014
Rate this:
Please Sign up or sign in to vote.
Yes, coffee with AngularJS !

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:

//Order class

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">

   <tr ng-repeat="order in orderList">

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:

  1. Access the search textbox on button click
  2. Get the text
  3. Compare it with table’s data
  4. Hide the remaining rows

But, in AngularJS, you just need to add a filter directive, i.e.,

Search : <input type="text" ng-model="filterText"/>

 <tr ng-repeat="order in orderList | filter: filterText">

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!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer ComponentOne India
India India
Community Evangelist at ComponentOne India

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 5 Mar 2014
Article Copyright 2014 by ashishjindal
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid