Compare JSON API

July 31, 2015 Leave a comment

Introduction

In this post we will compare   two famous JSON specific API i.e.  GSON and Jackson from performance point of view. json_1

Code

Wrapper

This class is used for conversion to JSON

public class MeasurementRecord {
       private String measurementId;
      private long duration;
      private long time;
      private MeasurementType type=MeasurementType.METHOD_CALL;
       public MeasurementRecord(String measurementId, long duration, long time,
              MeasurementType type) {
             super();
             this.measurementId = measurementId;
             this.duration = duration;
             this.time = time;
             this.type = type;
       }
//getters and setters
}

code for creating list

private static List<String> getList(int iteration){
    List l=new ArrayList();
    for(int i=0;i<iteration;i++){
    l.add(new MeasurementRecord("/test.html", 10, System.currentTimeMillis(), MeasurementType.WEB_REQUEST));
    }
    return l;
    }

Jackson API

private static long jacksonTest(int iteration)throws Exception{
             ObjectMapper mapper=new ObjectMapper();
             List<String> l=getList(iteration);
             long T1=System.nanoTime();
             String json=mapper.writeValueAsString(l);
             long T2=System.nanoTime();
             return (T2-T1);
       }

Gson API

private static long gsonTest(int iteration){
             Gson gson = new GsonBuilder().create();
             List l=getList(iteration);
             long T1=System.nanoTime();
             String json=gson.toJson(l);
             long T2=System.nanoTime();
             return (T2-T1);
       }

Results results graph

Conclusion

For converting small or medium size list GSON provide better response as compared to Jackson but for large size list Jackson provide some better response than GSON. Based on this results one can conclude that for converting small or medium size list to JSON one can use GSON for better performance.

Advertisement

Filed under Application Performance, JAVA Tagged with , ,

Angular JS Service

July 19, 2015 Leave a comment

Introduction

in previous post we concentrated on how to consume json data from server. i.e.  user provide stock symbol in search box and and click on search button.

in this post we will add one more functionality i.e. adding stock to watch list(although stock data is not updated but we will check how to auto refresh this data in next post.)

Need for Service

Irrespective of programming language service provide following benefits

  1. writing business logic
  2. writing common code which can be reused by multiple controllers

apart from this in angular js it provide one more benefit i.e. caching of data which can be accessed by multiple controllers, giving http call.

UI

User provide stock symbol and click search.

search_result

user click on add to watch list system will add stock in watch list.

bookMark

In view(html) use

  1. stockSearchWatchListController.js  :-JS for searching stock and adding it to watchlist
  2. yahooFinanceYQLAPIService.js :-
    1. Service for communicating with remote server on http.
    2. Caching common data required for searching and watchlist activities.
  3. we are using google font

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
        <script src=”stockSearchWatchListController.js”></script>
        <script src=”yahooFinanceYQLAPIService.js”></script>
        <link href=’http://fonts.googleapis.com/css?family=Amaranth:400,400italic&#8217; rel=’stylesheet’ type=’text/css’>
       
        <style>
            body {font-family: ‘Amaranth’, sans-serif;}
            table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px;}
            table tr:nth-child(even) {background-color: #f1f1f1;}
            table tr:nth-child(odd) {background-color: #ffffff;}
            table th {background-color: #A0AFD8;color:F9F7F7;}
            button {background-color: #A0AFD8;  border-radius: 5px;font-style: italic; text-decoration: underline;}
            input{border-radius: 5px; font-style: italic;}
        </style>

Create module in stockSearchWatchListController.js

//define module named stockModule
var stockModule = angular.module(‘stockModule’,[]);

Create yahooFinanceYQLAPIService and register it in module

Create default implementation  of 

var yahooFinanceYQLAPIService=function($http){

//default implementation

}; 

 Register service with module.

 var module=angular.module(“stockModule”);

module.factory(“yahooFinanceYQLAPIService”,yahooFinanceYQLAPIService);

stockSearchWatchListController.js

//define module named stockModule
var stockModule = angular.module(‘stockModule’,[]);
//replace $http with yahooFinanceYQLAPIService since yahooFinanceYQLAPIService is taking care of http communication
stockModule.controller(‘myStockSeachController’,function($scope,yahooFinanceYQLAPIService){
    $scope.getScriptDetails=function(){
        console.log(“script details “+$scope.scriptcode);
        var response=yahooFinanceYQLAPIService.getScriptsDetails($scope.scriptcode);
        response.success(function(data, status, headers, config) {
                $scope.scriptDetails=data;
        });
      
        response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
        });
          
    };
   
});

stockModule.controller(‘addStockToWatchListController’,function($scope,yahooFinanceYQLAPIService){
    $scope.addToWatchList=function(){
        console.log(“adding script to watchList”);
        var response=yahooFinanceYQLAPIService.addScriptToWatchList();
        if (response === undefined) {
            return;
        }
        response.success(function(data, status, headers, config) {
                if(data.query.count!=1){
                    $scope.scripts=data.query.results.quote;
                }else{
                    var scriptArray=[];
                    scriptArray.push(data.query.results.quote);
                    $scope.scripts=scriptArray;
                }
        });
      
        response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
        });
      
    };
   
 
    });

yahooFinanceYQLAPIService.js

var yahooFinanceYQLAPIService=function($http){
    var latestScriptCode=”;//useful for addScriptToWatchList i.e. shared between both search controller and watchlist controller.
    var getScriptsDetails=function(script){
        var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
        var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+script+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
        url=url+’?q=’+query;
        latestScriptCode=script;
        return $http.get(url);
    };

var watchListScripts=[];
    var addScriptToWatchList=function addScriptToWatchList(){
        if(watchListScripts.indexOf(latestScriptCode)>=0){
            return;
        }
        watchListScripts.push(latestScriptCode);
        console.log(“watchListScripts:- “+watchListScripts.join());
        var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
        var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+watchListScripts.join()+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
        url=url+’?q=’+query;
        return $http.get(url);
    };

    return{
        getScriptsDetails:getScriptsDetails,
        addScriptToWatchList:addScriptToWatchList
    };
}; 

var module=angular.module(“stockModule”);
module.factory(“yahooFinanceYQLAPIService”,yahooFinanceYQLAPIService);

view(html)

    <body ng-app=”stockModule”>
        <div ng-controller=”myStockSeachController” align=”center”>
                <div>Stock Quote</div>
                <div>
                    <form name=”stockQuoteForm”>
                            <input type=”text” required placeholder=”scriptcode” class=”form-control”    ng-model=”scriptcode”>
                            <button ng-click=”getScriptDetails()” type=”button” class=”btn btn-primary”>Search</button>
                    </form>
                </div>
            <table     ng-show=”scriptDetails”>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>symbol</th>
                        <th>LastTradePriceOnly</th>
                        <th>Ask</th>
                        <th>Bid</th>
                        <th>AverageDailyVolume</th>
                        <th>Currency</th>
                        <th>LastTradeDate</th>
                        <th>LastTradeTime</th>
                        <th>DaysLow</th>
                        <th>DaysHigh</th>
                        <th>YearLow</th>
                        <th>YearHigh</th>
                        <th>PE Ratio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{scriptDetails.query.results.quote.Name}}</td>
                        <td>{{scriptDetails.query.results.quote.symbol}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradePriceOnly}}</td>
                        <td>{{scriptDetails.query.results.quote.Ask}}</td>
                        <td>{{scriptDetails.query.results.quote.Bid}}</td>
                        <td>{{scriptDetails.query.results.quote.AverageDailyVolume}}</td>
                        <td>{{scriptDetails.query.results.quote.Currency}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeDate}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeTime}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysLow}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.YearLow}}</td>
                        <td>{{scriptDetails.query.results.quote.YearHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.PERatio}}</td>
                    </tr>
                </tbody>
            </table>
            </div>
   
   
    <div ng-controller=”addStockToWatchListController” align=”center”>
        <p>
        <button ng-click=”addToWatchList()” type=”button” class=”btn btn-primary”>AddToWatchList</button>
        </p>
        <div ng-show=”scripts”>
            <table>
                <thead>
                    <tr>
                        <th ng-click=”sortColumn(‘Name’)” >Name</th>
                        <th  ng-click=”sortColumn(‘symbol’)”>symbol</th>
                        <th  ng-click=”sortColumn(‘LastTradePriceOnly’)”>LastTradePriceOnly</th>
                        <th  ng-click=”sortColumn(‘Ask’)”>Ask</th>
                        <th  ng-click=”sortColumn(‘Bid’)”>Bid</th>
                        <th  ng-click=”sortColumn(‘AverageDailyVolume’)”>AverageDailyVolume</th>
                        <th>Currency</th>
                        <th  ng-click=”sortColumn(‘LastTradeDate’)”>LastTradeDate</th>
                        <th  ng-click=”sortColumn(‘LastTradeTime’)”>LastTradeTime</th>
                        <th  ng-click=”sortColumn(‘DaysLow’)”>DaysLow</th>
                        <th ng-click=”sortColumn(‘DaysHigh’)”>DaysHigh</th>
                        <th  ng-click=”sortColumn(‘YearLow’)”>YearLow</th>
                        <th  ng-click=”sortColumn(‘YearHigh’)”>YearHigh</th>
                        <th  ng-click=”sortColumn(‘PERatio’)”>PE Ratio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat=”sc in scripts”>
                        <td>{{sc.Name}}</td>
                        <td>{{sc.symbol}}</td>
                        <td>{{sc.LastTradePriceOnly}}</td>
                        <td>{{sc.Ask}}</td>
                        <td>{{sc.Bid}}</td>
                        <td>{{sc.AverageDailyVolume}}</td>
                        <td>{{sc.Currency}}</td>
                        <td>{{sc.LastTradeDate}}</td>
                        <td>{{sc.LastTradeTime}}</td>
                        <td>{{sc.DaysLow}}</td>
                        <td>{{sc.DaysHigh}}</td>
                        <td>{{sc.YearLow}}</td>
                        <td>{{sc.YearHigh}}</td>
                        <td>{{sc.PERatio}}</td>
                    </tr>
                </tbody>
        </table>
    </div>
    </div>
   
               
      
</body>
 

 

 

Filed under Javascript Tagged with , ,

Step by step approach for web application performance improvement.

July 18, 2015 Leave a comment

Introduction

This  post will concentrate on optimal ways to improve performance of Java based web application (although this post concentrates on Java based web application same thought process can be applied to web applications developed in other technology stack) without impacting monetary cost.

We will cover the following points from performance point of view.

  1. Important factors impacting performance of system.
  2. Patterns of performance issues
  3. Step by step approach in improving performance of system by keeping same infrastructure, i.e. without impacting cost to project.

Performance improvement activity is not a one time activity, but it is an iterative activity which involves PDCA (Plan, Do, Check, Act)

Factors impacting web application performance.

  1. Total number of users accessing (logged into) system
  2. Total number of transactions hitting to the system
  3. The Total amount of data fetched by the  client (both human and other systems)

By looking at above parameters one can easily say the performance of system degrades when any of these parameters increases.

Ways to improve performance of the system is by

  • Reducing load on system with the help of distributing load across systems (This approach mostly involves hardware cost and installation of load balancer hence we will not concentrate on this point here, but can be implemented once steps involved in this post are implemented. ).
  • Make the system work for the  least  amount of data to for request received by the client.

Patterns  for  Performance issues

Whenever a performance issue occurred one can observe any of these patterns.

  1. Issue specific to single user
    1. In order to determine RCA for these types of issue one needs to determine if client  system has incompatible software installed or some  upgradation happened recently.
  2. An issue occurred only at a specific site/location
    1. Probable root cause for these types of problems
      1. Network related issues at that specific location
    2. Incompatible software installation or some upgradation happened recently.
  3. Issue observed only for specific functionality.
    1. One needs to find the issue is specific to code, persistence layer or it is specific to external interface (webservice, JMS) system is communicating.
  4. Issue observed across all locations during a specific time frame (work hours, month end etc)
    1. These types of issues are examples of system unable to handle load.
  5. Issue observed intermittently
    1. These types of issues are more dangerous and root cause of these types of problems can be observed by taking heap/thread dumps.

Important components in  web applications

Majority of web applications will have the following components

application

Steps to improve the performance of the system.

Although one can improve performance  of system by various techniques, but ideal way is to improve performance at client layer then at application code level and at the end at persistence layer.

improve performance  from client side —>Application Code—> Persistence layer.

Steps  at   client side (browser)

These actions are related to working primarily on static content, i.e. Java Script, CSS, Images etc.

Segregate inline JS, CSS to separate JS, CSS file

Many standard browsers have important feature i.e. caching of static content (JS, CSS). Writing inline JS and CSS kills caching feature provided by the browser. Inline static content also involves pain of moving information from host to client for each client request.

This activity is a good example of making the system work on less data.

Following is screenshot for Mozilla browser indicating the amount of data transferred and the time taken in order to complete a request for first time any subsequent calls will not give call to the server but will load from the local cache of browsers.

page_loading

Replace existing JS, CSS by minified JS.

Minification is activity of removing unwanted data (whitespace, comments) from production ready static content. Few tools also provide a facility for converting big variables into small. This way one can reduce the amount of data to be transferred to client side.

A web application can have both application specific JS, CSS and  third party JS, CSS (e.g.. JQuery, Angular JS, Bootstrap…..).

Various famous  JS, CSS libraries provide both  minified and normal versions (minified version removes all unnecessary white spaces. Replace long identifiers by short).

Following is screenshot indicating the amount of data downloaded and time taken for loading minifed version of angular js.

page_loading_min

The total amount of improvement in time  (509-78) *100/509 nearly 84%

Total amount of improvement in data (937.81-122.96)*100 /937.81 nearly 86%

Compressing application specific static content

In order to compress application specific static content (JS, CSS) various modification tools available

Few common examples of compressors

  1. YUI Compressor: – Tool from Yahoo
  2. JsMin: – from Douglas Crockford, one of the most respected personality in the field Java script.
  3. Google Closure: -Tool from Google

Remove Http 404 status code

Http 404 status code sent by the http host  when requested resource not available to host. These types of requests create unnecessary network round trips.

Following links help in configuring access logs for jboss and Weblogic server.

Configure access logs in Weblogic

Configure access logs in JBOSS

Imp Note: - enabling access log in, the system will increase load on system, hence must be used with caution.

Replace client side pagination/huge table data by server side pagination

Server side pagination help loading page quickly. This technique fetches only required records to be displayed on the view.

Another way to improve page loading time is by forcing users to narrow down searches.

Steps  on   the server  (application/web server) side

Integrate application with the application performance monitoring (APM) tool.

Purpose of integrating these tools is to measure performance of the system in production with minimal load on system. It also helps in determining parameters during load. Although the majority of these tools utilizes java’s bytecode instrumentation, but JAMon provides Aspect oriented programming (AOP).

Important parameters from performance point of view.

  • Maximum number of users logged into the system.
  • Maximum transactions hitting to the system (determine transaction rate)
  • Most frequently hit URLS on the system.
  • Slow Running transactions in the system.
  • Slow Running SQL queries.
  • Most frequently occurred Exceptions.

Following are few important APM tools.

table

Some other APM tools are New Relic, Compuware Dyna trace. These tools  along with AppDynamics present in Gartner’s magic quadrant.

Reduce IO

One can use following techniques for reducing IO.

  • Reduce number of logs to file
  • Remove System.out.println
  • Reduce size of log file :- it is always better to write to small files instead of writing and analyzing huge files
  • Avoid catching too many exceptions in the system. Handle it properly. Following code indicates how system will behave for exception and without exception. Various APM tools provide most frequently thrown exceptions and code which is throwing them.
public class ExceptionTest {

       private static void exceptionTest(){

             int i=0;

             int j=1;

             try{

                    int k=j/i;

             }catch(ArithmeticException ex){

             }

       }

       private static void withoutExceptionTest(){

             int i=0;

             int j=1;

             if(i>0){

                    int k=j/i;

             }

       }

       private static void exceptionTestLoop(int iterations,boolean isHandleException){

             long startTime=System.nanoTime();

             for(int i=0;i<iterations;i++){

                    if(isHandleException){

                           exceptionTest();

                    }else{

                           withoutExceptionTest();

                    }

             }

             long endTime=System.nanoTime();

             long time=endTime-startTime;

             System.out.println(“time for execution  exception “+time+” iterations “+iterations+” isHandleException “+isHandleException);

       }

       public static void main(String[] args) {

             exceptionTestLoop(100000,true);

             exceptionTestLoop(100000,false);

       }

}

results

Steps  on the DB side.

Although this post concentrate mainly on application code and browser specific side but following are easier techniques on persistence layer.

  1. Add indexes to columns: – this technique improves performance of Select Queries but reduces DML hence must be used with caution.
  2. Use run time parameters to SQL queries instead of using hard coded static parameters
  3. Cache master data instead of fetching it from db
  4. Archive database on predefined interval

Filed under Application Performance Tagged with

Angular JS HTTP Communication

July 12, 2015 1 Comment

In earlier post we understood just about basic facts about how to configure controller in angular JS. In this post we will concentrate on how to send HTTP requests and consume  the JSON response.

Example for  HTTP request

We will be using Yahoo’s query API for getting stock details. i.e. https://query.yahooapis.com/v1/public/yql

We need to also attach following query parameters to the above URL.

  • q= YQL query (it is SQL like query to fetch details. More information on Yahoo developer network
  • format= JSON
  • diagnostics=true
  • env=store
  • Callback

YQL for fetching data for YAHOO (YHOO).

Replacing $scope. scriptcode=YHOO

select * from yahoo.finance.quotes where symbol in (‘+’\”+$scope.scriptcode+’)

Complete URL for getting  stock details

 var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+$scope.scriptcode+‘%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
url=url+’?q=’+query;

What we want to do?

We will offer a search facility to the end-user where users can give stock symbol.

searchWhen a user provides stock symbol and click search then the system will give call to yahoo server and fetch the response in JSON to display stock details in the following way.

search_resultView layer (HTML)

 JS and CSS dependency

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
    <script src=”angularjsHttpCall.js”></script>
    <link href=’http://fonts.googleapis.com/css?family=Amaranth:400,400italic&#8217; rel=’stylesheet’ type=’text/css’>
    <style>
            body {font-family: ‘Amaranth’, sans-serif;}
            table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 5px;}
            table tr:nth-child(even) {background-color: #f1f1f1;}
            table tr:nth-child(odd) {background-color: #ffffff;}
            table th {background-color: #A0AFD8;color:F9F7F7;}
            button {background-color: #A0AFD8;  border-radius: 5px;font-style: italic; text-decoration: underline;}
            input{border-radius: 5px; font-style: italic;}
    </style>

We are adding google fonts. In order to add different fonts, please visit https://www.google.com/fonts

ng-app, ng-controller

<body ng-app=”angularJSHTTPCallModule” ng-controller=”angularJSHTTPCallController”>

Search form

<div>Stock Quote</div>
      <div>
             <form name=”stockQuoteForm”>
                            <input type=”text” required placeholder=”scriptcode” class=”form-control”    ng-model=”scriptcode”>
                            <button ng-click=”getScriptDetails()” type=”button” class=”btn btn-primary”>Search</button>
             </form>
       </div>

By looking at above code two important attributes (directives) highlighted. More information about all available directives here

  •  ng-model- this directive will bind input value and make it available in the controller
  • ng-click – it will trigger a function on click event

Search result

<table     ng-show=”scriptDetails”>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>symbol</th>
                        <th>LastTradePriceOnly</th>
                        <th>Ask</th>
                        <th>Bid</th>
                        <th>AverageDailyVolume</th>
                        <th>Currency</th>
                        <th>LastTradeDate</th>
                        <th>LastTradeTime</th>
                        <th>DaysLow</th>
                        <th>DaysHigh</th>
                        <th>YearLow</th>
                        <th>YearHigh</th>
                        <th>PE Ratio</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{scriptDetails.query.results.quote.Name}}</td>
                        <td>{{scriptDetails.query.results.quote.symbol}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradePriceOnly}}</td>
                        <td>{{scriptDetails.query.results.quote.Ask}}</td>
                        <td>{{scriptDetails.query.results.quote.Bid}}</td>
                        <td>{{scriptDetails.query.results.quote.AverageDailyVolume}}</td>
                        <td>{{scriptDetails.query.results.quote.Currency}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeDate}}</td>
                        <td>{{scriptDetails.query.results.quote.LastTradeTime}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysLow}}</td>
                        <td>{{scriptDetails.query.results.quote.DaysHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.YearLow}}</td>
                        <td>{{scriptDetails.query.results.quote.YearHigh}}</td>
                        <td>{{scriptDetails.query.results.quote.PERatio}}</td>
                    </tr>
                </tbody>
            </table>

JS

angularjsHttpCall.js

(function() {
    var angularJSHTTPCallModule = angular.module(‘angularJSHTTPCallModule’,[]);
    angularJSHTTPCallModule.controller(‘angularJSHTTPCallController’,function($scope,$http){
        $scope.getScriptDetails=function(){
            var url=’https://query.yahooapis.com/v1/public/yql&#8217;;
            var query=’select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22’+’\”+$scope.scriptcode+’%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback’;
            url=url+’?q=’+query;
            var response=$http.get(url);
            response.success(function(data, status, headers, config) {
                $scope.scriptDetails=data;
                var js1=JSON.stringify(data);
                console.log(“js12 “+js1);
            });
            
            response.error(function(data, status, headers, config) {
                console.log(“failure “+data+” status “+status+” headers “+headers);
            });
        };
    });
}());

in above code asynchronous successful response available from server is given to success method while error handled with error method.

Filed under Javascript Tagged with , ,

Angular JS Controller

July 12, 2015 Leave a comment

Introduction

In earlier post  we concentrated on the benefits of designing JS in a specific way. In this post we will look at

  • How to configure Angular JS?
  • Configure the controller
  • Important angular JS  specific attributes (directives)
  • Important angular  specific objects eg :- $scope, angular

Configure Angular JS

To work with the core  angular js functionality one needs to include only angular js  in view(jsp, html….)

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;

Configure Controller

Define Module in JS

moduleIn above case empty array indicates no dependency but has implicit dependency with core module.

Attach controller to the module

//Define MyController and attaching it to the module

myfirstAgnularModule.controller(‘MyController’,function($scope){

$scope.message=”Hello Angular”;

});

In above case $scope is an angular specific object.  Any parameter which starts with $ managed by angular js.

In above case we are attaching message to $scope object. Anything which we are attaching to $scope object will be acting as models.

By looking at this example we can say controller is not directly communicate with a view (html) but it is through the model.

On macroscopic level controller is responsible for

  • Organizing information
  • Control things to visible/hide on view
  • Communicate with remote server to fetch data.

Configure view for module and controller

<!– load angular js from CDN –>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;

<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>

{{message}}

</body>

Angular js specific attributes/directives and binding expression

These attributes are known as directives

  • ng-app
    • Only one attribute must be present in whole html
    • Whenever angular js find this attribute. It will bootstrap itself.
  • ng-controller
    • One page can have multiple ng-controller directives
    • It must be defined at the same level or at child level of ng-app
  • Binding expression
    • In the above case {{message}} acts as binding expression
    • Binding expression helps displaying model data to view.

Output

opComplete Example

myFirstAngularExample.js

(function() {
    var myfirstAgnularModule = angular.module(‘myfirstAgnularModule’,[]);
    myfirstAgnularModule.controller(‘MyController’,function($scope){
        $scope.message=”Hello Angular”;
    });
}());

myFirstAngularExample.htm

<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script&gt;
<script src=”myFirstAngularExample.js”></script>
</head>
<body ng-app=”myfirstAgnularModule” ng-controller=”MyController”>
    {{message}}
</body>
</html>

Filed under Javascript Tagged with , ,

Pre Angular JS

July 11, 2015 3 Comments

Target Audience: – Beginner

Angular JS is a Java script open source framework from Google and downloadable from  https://angularjs.org/

Important concepts  before start playing with Angular JS

Angular is  based on following important concepts

  • Using function expression instead of the function declaration
  • Functions for  encapsulation
  • Using modules for functions
  • Avoid using global variables

Function expressions VS function declaration

Function declaration
  • As variable declaration starts with var function declaration starts with function.
  • The JS object created same as a function name. In following case object with name myFunction created.
  • Function declaration  parsed and executed before any other expressions.
function myFunction(){
console.log (“I am in myFunction”);
}

Function expression

Assign function to variable.
By doing this, one can dynamically change call to the function.
Used inside function to make encapsulation and code more and more modular

var myWork=function(){
console.log(“myWork Invoked”);
};

Function expressions are of two types
An anonymous function expression

var myWork=function(){
console.log(“myWork Invoked”);
};

Named function expression
var myWork=function myWorkFunction(){
console.log(“myWork Invoked”);
};

Functions for encapsulation

function expression offer better facility for encapsulation
Consider the following simple example

//Step 1: – concentrate on implementation logic: -Function expression with global variable myProcess
var myProcess=function myProcessF(){

var preProcess=function(){
console.log(“in preProcess”);
};

var postProcess=function(){
console.log(“in postProcess”);
};

var doProcess=function(){
console.log(“in process”);
};
// Some private function which  used internally
var somePrivateFunction=function(){
console.log(“some internal function”);
}

//Expose functions and variable which  used outside this function: Good example of encapsulation
return{
//Aliasing
preProcessing:preProcess,
postProcessing:postProcess,
doProcessing:doProcess
};
};

//Invoke Function
var process =myProcess();
process.preProcessing();
process.doProcessing();
process.postProcessing();

When this code executed it give the following output.

js_example

Avoid creating Global variables

By looking at above example, we can see that myProcess is a global variable. These types of variables are candidate for overriding hence one needs to avoid creating global variables with the help of IIFY

(function() {
// The code here  executed once in its own scope
}());

Filed under Javascript Tagged with , ,

%d bloggers like this: