TECH PACK: March 2014

Saturday, 22 March 2014

Why AngularJS?

AngularJS is an open source JavaScript framework maintained by Google,that assist making single page web application with MVC framework ,it also support for testing.
AngularJS is a MVC framework that defines numerous concepts to properly organize your web application.Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated by dependency injection. Use of dependency injection, AngularJS helps you structure and test your JavaScript code very easily. Finally, utility code can easily be divided into services that can be injected in your controllers. Now let’s have a closer look at all those features.

Expressions

In order to create views ,AngularJS help you to directly execute expression from HTML page.

 <div>1+2 = {{1+2}}</div>

the page will display 1+2 = 3

Directives

Directives are one of the most powerful feature of AngularJS. They allow to extend HTML the needs of web applications. Directives specify how page should be structured for the data available in a given scope.

There is several directives most people uses ngRepeat

  <tbody>  
    <tr ng-repeat="driver in driversList">  
     <td>{{$index + 1}}</td>  
     <td>  
      <img src="img/flags/{{driver.Driver.nationality}}.png" />  
      {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}}  
     </td>  
     <td>{{driver.Constructors[0].name}}</td>  
     <td>{{driver.points}}</td>  
    </tr>  
   </tbody>

by this you can possible looping through the driversList.

Filters

In order to change the way data are displayed in your page, AngularJS provides you with the filter mechanism.

Just look at the code:

 <tr ng-repeat="driver in driversList | filter: searchFilter">

The searchFilter will filter the driverList.

Partial Views

AngularJS is single page web application .So we have only one real HTML page ,its content can be changed without download a new page.

In order to build an application, We define a main page (index.html) which acts as a container for web application. In this page, we can bind part of our application to a specific AngularJS module with the directive “ngApp”. We can bind the whole page to a single AngularJS module if you want. After that, you can use the directive “ngView" in order to use partial views.

index.html look like:

 <body ng-app="F1FeederApp">  
   <ng-view>  
   </ng-view>  
 </body>

Controllers

In AngularJS, the controller is where the behavior of your application is located. Controllers are used to populate the scope with all the necessary data for the view. Using proper separation of concerns, controllers should never contain anything related to the DOM.

REST communication

In order to communicate with a restful server, AngularJS provides two services $http and $resource. $http is a small layer on top of XmlHttpRequest while $resource is working at a higher level of abstraction, both can perform the same job.

 ergastAPI.getDrivers = function() {  
    return $http({  
     method: 'JSONP',   
     url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'  
    });  
   }

Using AngularJS i created an application which gives status of F1 Championship standings,for live demo . To see code repo .

Monday, 17 March 2014

Graph Coloring

Graph coloring is part of graph theory ,which has great practical importance. The default graph coloring, vertex coloring means coloring of vertices of a graph in such a way that , no adjacent vertices share same colour.
The problem of coloring of a graph has several application such as scheduling, register application in compilers, frequency assignment in mobile radios , etc.
How graph coloring is possible.

Let G=(V,E) be the graph to be colored , where V and E are vertices set and edges set respectively
Compute the degree of each vertices in V
Make a list uncolored which holds V in descending order of their degrees
Initialize currentColor to zero
WHILE length of uncolored greater than zero
Initialize first to the first element of uncolored
Remove first from uncolored
Initialize color(first) to currentColor
Initialize coloredWithCurrent to {first}
FOR each vertex v in uncolored
IF adjacent list of v and coloredWithCurrent(currentColor) has no common elements
Set color(v) to currentColor
Add v to coloredWithCurrent(currentColor)
Remove v from uncolored
ENDIF
ENDFOR
Increment currentColor
ENDWHILE

The idea of vertex coloring above take the vertex V and also, it's decreasingly arranged based on the number of adjacent vertices for each vertex v in V.For this we need a adjacency list of the graph .The main idea of the graph coloring by above algorithm is that, it assigns current colour for vertices if the adjacency list of that vertex does not contain elements in the list of vertices which are already assigned the current color. If it contains, a new colour is assigned for the current vertex.

I have implemented a web application based on above theory , in that we can create vertices and edges after that just click the button "color it". Click here to see my graph coloring application deployed on heroku. I used HTML 5, JavaScript and python-django for developing this. The source code link .

Tuesday, 4 March 2014

Unit Test In Python

Unit testing is testing individual "unit" or function of a program. Here we use TDD test driven development that is first write the test case then write the code . In python unit test is possible by "unittest" module .

"isodd.py" is a program to convert any number to odd:

 class IsoddError(Exception): pass   
 class TypeError(IsoddError):pass  
 def isOdd(n):  
   if type(n)==int :  
      if n%2 != 0 :   
        return n  
      else:   
        return n+1        
   else:       
     raise TypeError,"Invalid"

How to write test cases :

First write known result with known output
Check the above cases
next check failure of isOdd

here is the TDD code for isOdd:

 class TestData(unittest.TestCase):  
      TestData=( (0,1),  
           (1,1),  
                 (-1,-1),  
           (-2,-1),  
           (8,9),  
           (10,11),  
           (55,55),  
           (100,101) )  
      def testIsOddTestData(self):  
           """isOdd give known result with known output"""  
           for integer,fn_value in self.TestData:  
                result=isodd.isOdd(integer)  
                self.assertEqual(fn_value, result)  
 class IsOddBadInput(unittest.TestCase):  
      def testIsOddInput(self):  
           """isOdd fails for bad input"""  
           self.assertRaises(isodd.TypeError, isodd.isOdd, 'hello')

To see the source code click here