Thursday, 31 March 2016

Implementing sliders using Angular JS

It feels great when we implement something interesting and it’s such a pleasure to share that with you all. I hope this blog would help you in creating amazing things.
We use sliders in situations where we have lots of content but very small space to display that content. In this blog we will try to implement sliders using Angular JS scripting language.
Let’s start from the view of the slider which we are going to create:

Now let us see how we can do this:


Files used:
Type of file:
JavaScript file

Implementing navigation arrows functionality

HTML file
UI for slider

Css file
Styles for elements

1. JAVASCRIPT FILE: ‘slider.js’ file.

Below code is intended for functioning of previous and next arrows. First of all we have to pushed images into the array. Then we have defined the working of previous and next arrow placed on the sides of slider. Indexing of array gets incremented or decremented depending on which arrow we have clicked. 
We have used slice function to slice our array of templates/images and then the sliced set is returned for display purpose. Slice function slices the array of images from its startindex and endindex and then returns it to the calling function.
 Using limit variable we have just shown one image at a time on the page. We can change that limit according to requirement.

Here is our code:-

app.controller ('maincontroller', function ($scope, $http)
  //variable initialization
    $scope.templateStartIndex = 0;
    $scope.templateEndIndex = 10;
    $scope.limitTemplate = 1;
    $scope.templates = [];
    $scope.isPrevious = false;
    $scope.isNext = false;

   //adding required images into array
    $scope.templates.push ("/Templates/slide1.jpg");
    $scope.templates.push ("/Templates/slide2.jpg");

//function for showing next template/image
    $scope.ShowNextTemplate=function (limit)
        $scope.isPrevious = false;
        $scope.isNext = true;
        if ($scope.templateStartIndex<$scope.templateEndIndex-limit)
            $scope.templateStartIndex = $scope.templateStartIndex + 1;
//suppose we have pushed 10 images
            if ($scope.templateEndIndex<11) 
            if ($scope.templateEndIndex=10){}
//call to TemplateItems() for returning sliced set of images 

    //function for showing previous template/image
    $scope.ShowPrevTemplate = function (limit) {
        $scope.isPrevious = true;
        $scope.isNext = false;
    //function for returning set of sliced templates
        return $scope.templates.slice($scope.templateStartIndex,   $scope.templateEndIndex);


Let’s say we have SliderView.html file

Below is the code.

<div class="content">
        <a class="slider-arrow left" >
            <img src="Images/arrow_left.png" ng-click="ShowPrevTemplate(1)"/>
        <div class="slider-container">
            <span ng-repeat="template in TemplateItems() | limitTo:1">
     <img src="{{template}}" class="img-responsive" ng-class="{'slideright': isNext, 'slideleft':isPrevious}" id="slideimage"/>
        <a class="slider-arrow right" >
            <img src="Images/arrow_right.png" ng-click="ShowNextTemplate(1)" />

On Previous and Next arrow clicks we have called functions to get new image. We have used ng-repeat for looping through set of array elements. 
ng-repeat is the key behind this slider which gives us sliding effect. It calls TemplateItems () which returns the sliced set of images. Number of images which are returned after slicing depends upon the limit which we have set i.e. limitTo.
Secondly, ng-class directive is used to dynamically add classes to the image based on which arrow is clicked. If previous arrow is clicked then slideleft animation is applied and if next arrow is clicked then slideright animation class is applied. 
The following variables are used in the .js file to check the scenario:
 $scope.isPrevious and $scope.isNext. 
If the isPrevious variable is set true then slideleft animation is applied else slideright animation is applied and vice-versa to get a feel of sliding from left to right and right to left.


slideleft and slideright classes are responsible for Animation effects.

  animation: animslide 1s ease-out;
 @keyframes animslide 
        transform: translateX(500px);

        transform: translateX(0);

  animation: animslideleft 1s ease-out;
@keyframes animslideleft
        transform: translateX(-500px);

        transform: translateX(0);

  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
    height: 64px;
    width: 64px;
    position: absolute;
    top: 45%;
    right: 0;
.slider-arrow img 
     width: 100%;
     height: 100%;
    left: 0;
    right: 0;

Thank you friends.
I hope this will help you in implementing sliders using Angular JS!

Saturday, 19 March 2016

Sharing my thoughts – Part 2: It’s the OPPORTUNITY that one needs

To my young friends,
In my previous blog I shared my opinion on the importance of our inner voice. This time I would like to share my thoughts on deciding the right priorities - at least in the beginning of your career.
Every day, we come across many people who have excelled in their fields, who have acquired a lot of wealth and who seem to be very successful. They inspire and encourage us. In most cases, their external success is very visible to everyone but the story on how they got there, largely remains unheard. We also don’t spend enough time trying to find that out. I will talk about a little bit of this today.
For most of us, a job is means to earning money so that we can lead a comfortable life. That is fine, however, the problem starts when we directly link potential of a job with the salary and monetary benefits it is offering. Since our society links wealth with status and success, we are told that a high paying job is what we must have.  We tend to give low priority to find out what other opportunities are hiding in the job. It is hard to ‘see’ and evaluate an opportunity because unlike the money, it is normally not measurable and might take some time to deliver the results whereas, money is right there. Also, in today’s fast life and because of the demand to make it big quickly, there is less room for long term thinking and patience.
In my previous blog, I mentioned Kalyan Verma (world renowned wildlife photographer who left his high paying job at Yahoo to pursue his passion). Being a wild life photographer myself, I have attended his workshops and am very impressed with him and his skills. In the very beginning of his photography career, Kalyan got an offer to work at Jungle Lodges and Resorts near Bengaluru for a few weeks as a naturist for no salary but with food and accommodation. He accepted that. He actually ended up working like this for more than six months. He made great use of this opportunity. He learnt a lot about wildlife and photography, made friends and later that year, he got the “Wildlife Photographer of the year” award from Sanctuary Asia magazine (a very reputed nature and wildlife conservation magazine published from India). He never looked back after that. He valued the opportunity that came his way, he had much bigger picture in his mind than thinking that he is not getting paid. After few years of hard work and dedication now he now enjoys status and wealth.
Now let’s see another example that could have gone better. Few years ago I came across Rajesh (name changed) who was looking for a new job. Rajesh was in the initial stage of his career and possessed the skills that were very common in the industry. It looked like he didn’t have a stable job either. Through a reference, Rajesh applied in a very reputed firm. Fortunately, that firm was looking for that kind of profile at that time. The potential employer informally enquired about the expected salary from Rajesh before inviting him for the interview. Rajesh quoted high salary compared to the prevailing range in the industry. To make things worse, when he did not hear back, he tried to negotiate and asked how much can they offer. For obvious reasons, it did not go well. A good opportunity was lost because of the wrong priority. In my opinion, he needed to first understand and evaluate his situation and every aspect of the job before coming to remuneration.
20 years ago, I decided to move from being a manufacturing engineer to a software professional. When I got the job offer which I was eagerly waiting for, I found that the offered salary was lower than my salary at that time. Initially, I was a little disappointed. However, I am happy that I prioritized my requirements correctly and I accepted it. It changed my life and brought many more opportunities and satisfaction.
In this information age, the young generation is very smart, confident and aware, however, my advice to them is to be matured and not always keep money on top of their priority list. Have a bigger picture, clear priorities and long term planning.
When it comes to a job, let’s see what aspects of that we should carefully check:
-          Opportunities to do what you really want to do, what you enjoy
-          Opportunities to learn and to try new things, environment that brings out the best in you
-          Opportunities to take more responsibilities, get more exposure and go beyond your comfort zone
-          Opportunities to be yourself and not compromise on your integrity and values
Obviously, it is not always possible to evaluate a job up front, we have to rely on related information, friends and our own judgement before making the decision. That is where our maturity, long term thinking and ability to judge the situation come into picture.  
I also want to point out that you must also realize that it is not always possible to get everything you are looking for in the job. Always remember, when opportunities are not easily available YOU MUST CREATE THEM. You will realize that it is very possible only when you try. We will discuss this point in future blogs. 
At the end I like to summarize it this way, Worry about how much you are learning, not about how much you are earning because Learning brings earning with it.
              Good Luck! 

Tuesday, 15 March 2016

Development in MongoDB with NoSQL Manager!

Hello Guys,

 I would like to share some information about development in MongoDB with NoSQL Manager Studio. So the very first question will be, what is MongoDB?
MongoDB is basically an open source database which falls under NoSQL category.
With NoSQL I mean, it does not follow the traditional way of storing data in tables and rows. Instead, it stores data in the form of documents. These documents are in JSON format. 
MongoDB is fast and scalable. A database in MongoDB is a set of collections, which holds set of documents, one single document is a set of fields which is of key value pair. For e.g. Employee collection will have following information; 
{“EmployeId": 101, “EmployeName”:"James", "Email”:””,”City”: “New York”} 

NoSQL Manager
It is a tool for MongoDB Administration, Development and Management.  It gives you document viewer and editor with Tree, Table and JSON view modes. It allows import tables from MySQL and SQL Server databases.

Before moving into development, a very important step is to start database engine. 
To do so, 
1) Open command prompt and make this path “C:\Program Files\MongoDB\Server\3.2\bin” your current working directory. 
2) Type “MONGOD” and hit enter. This command will start mongo server process. As shown in below screen.
Now you are ready to develop and using MongoDB!!!

Development in MongoDB composed of below major steps:
1) Create a Database:-For creating new database in MongoDB, click on databases and select create new database. Enter the database name as shown below.

2) Query the Database: - Open shell prompt in NoSQL Manager and execute below commands for creating new collection and Insert some data into the Employees MongoDB database.
db.createCollection ("Employee", {size: 2147483647})
db.Employee.insert ({EmployeId: 1, EmployeName:"Rajesh", Email:"", City:"Mumbai"})

Now, let’s execute a select query on Employee collection we just created, db.Employee.find ({EmployeName: "Rajesh"}). 
It will show you the actual document view in result of NoSQL Manager Studio.

 What’s more for SQL users??Import MS SQL Server Database into MongoDB:- 
Step 1:-Choose “Import data from External data sources” on Employee Database. Select your data sources (MS SQL Server Database) and database as mentioned in below screen.

Step 2:-After selection of database the next screen shows available tables in SQL Server SampleDB. I selected country table, which I want to import into my Employees MongoDB database as shown in below screen

Step 3:-Click next on same window and Execute selection. It will show number of document imported into MongoDB.
You can see new country collection is added into the collection of Employees Database.
Now let’s do select query on Country Collection for US country which shows below result.
One more interesting feature is that you can render same data in different views e.g. Tree view, Table view, Text view (JSON format). You can find those options in section highlighted in the below image.

That’s all friends!!
 I hope this will help you getting familiar with MongoDB.

Friday, 5 February 2016

Sharing my thoughts – Part 1: Driven from within!!

Dear All,

I am a big believer of the Power of Youth. History is full of evidences that the energy and the strength of youth if channelized properly, can create wonders. In this series, I like to share some of my thoughts that I have learnt over the years with my young friends. I hope readers will find them useful. I welcome any comments or suggestions to make it more helpful.

In today’s fast pace life filled with numerous opportunities and unlimited choices and a life that is packed with competitive spirit, many times we find ourselves confused as to what is right and what is wrong or what should we do and what we should not. In this blog I like to cover one of the most important advice that will help you lead a successful and more fulfilling life.


Each one of us have many influences in our life that make us who we are. Initially most of us take parents and teacher’s guidance during schools. Which is very important and necessary. Later, friends, colleagues, relatives, society, media etc. play their roles.

However, my advice to you is that, you should be in-charge of your life not others. Take some time to understand what you like, what you enjoy, what are those things or activities which make you forget everything like time, sleep and hunger. Remember, those are your callings and you should follow them.

At every steps you will find people who will give you free advice on what you should do for your future. Listen to them but do what you think is right for you. Remember, it is never too late. I changed my direction after few years into my first job. Since then I have been trying to follow my heart and have taken some very significant decisions that have played very important role in my career and life. I am very happy and satisfied with most of those decisions. These events have made me learn and experience what I am sharing with you today.

Most of us normally link money with success. In my opinion, between a life with lot of money and a life that we happily look forward every morning, the second option is much better. I am not saying money is not important however, hiding your inner voice under the shell made up of money is not a good idea in long term. We will talk more about wealth in the future blogs.

About the society pressure i.e. ‘Log kya kahenge’ (what will people say), I have a very simple advice, Ignore them! Unfortunately, society’s success parameters are very shallow and flexible. Today they may not have good things to say about you but it is very possible that tomorrow they might be proud of you.

Let me share some well-known examples. The popular Cricket Commentator Harsha Bhogale did his MBA from IIM Ahmadabad, a premier management institute in India. He could have easily gotten a high paying job but he followed his passion and we all know how successfully he did it. Kalyan Verma was a well-paid Yahoo India’s software professional. However, now he is a world renowned wildlife photographer. The list goes on and on. These examples also indicate that we many not find our callings early on. That is just fine. What is important is to keep looking for it. 

In summary, my advice is to try to know yourself and have your priorities clear. Here are some simple tips on how you can go about it.
Take a diary and write down following
-          What activities you enjoy doing in your free time
-          What you like
-          What you don’t like
-          What future events will make you very happy like travelling, awards, promotions etc. 
-          What are those things that make you lose track of time, hunger, sleep etc.

Don’t finish this process in one sitting, it will not be complete. Keep adding to it whenever you think of sometime. You may also consider going through lot of information and help available online.

I am very confident that the list that you prepare will give you a very good idea about your passion or it will have some common themes which will be the reflection of your inner you. Try to analyze and come up with a plan on how you can ‘connect the dots’. That direction will give you much more pleasure, satisfaction and success than something that you force onto yourself. It will help you find the goal, the direction and on top of that you will enjoy this journey.

At the end, I do want to mention that I try to follow what I mentioned above as much as I can, however, there are still many things that I have not been able to do or in other words not been able to connect all the dots yet. I am work in progress.

Good Luck!!

Tuesday, 24 November 2015

Enable Intellisense for JavaScript Libraries (e.g., JQuery, AngularJS) in ASP.NET

IntelliSense has become an integral part in programming. It goes hand in hand with .NET because Visual Studio has ability to use reflection to retrieve all the information from the references that you have provided. If you start typing and IntelliSense has no suggestions you’ll immediately realize there is something wrong.

So why not have Intellisense for JavaScript Libraries?

Follow the following steps to enable Intellisense for JavaScript Libraries in your ASP.NET project:
  • Create a folder named “Scripts” in root.
  • Right Click on it => Add => Add New Item => JavaScript File with name “_reference.js”
Note: This file must (by default) be located in a folder at the root called /scripts/. That's the naming convention. Any file located at /Scripts/_references.js is automatically added to global Intellisense.
The file “_reference.js” will contain nothing but just a bunch of references. This is also the only file that is included in the intellisense all the time.
As you can see we have added references for AnjularJS and JQuery. Similarly you can add for any other JavaScript library. Path should be the path of JavaScript library.
Now you might be wondering what is first line.

/// <autosync enabled="true"/>

JavaScript files are added, deleted and renamed all the time, so it's very easy to forget to update the _references.js file accordingly. A better approach was to add a feature that would do that automatically and thereby give Intellisense for all .js files globally all the time.

This new auto-sync comment is all it takes to enable automatic synchronization of triple-slash references. Whenever a .js file is added, renamed, moved or deleted, the _references.js file is automatically updated to reflect the changes.

That’s it. Now just focus on logic to be implemented, intellisense will handle rest.

Wednesday, 18 November 2015

New Project on AngularJS

To all software developers out there, we are very excited to start a very interesting AngularJS based project. Love to know your experience with AngularJS or if you would like to learn it. 
Let us know!

Monday, 15 September 2014

Updating Identity Column in SQL Server.

If you want to update the value of identity column of existing records then you need to set

set identity_insert YourTable ON
-- Set Identity insert on so that value can be inserted into this column
-- Insert the record which you want to update with new value in identity column
INSERT INTO YourTable(IdentityCol, otherCol) VALUES(13,'myValue')
-- Delete the old row of which you have inserted a copy (above) (make sure about FK's)
--Now set the idenetity_insert OFF to back to prevoius track