Sunday 10 April 2016

Angular Static Routing- Using ngRoute

This blog will help you to implement static routing using AngularJs. In order to understand static routing, you need to have a good knowledge over AngularJs. Before we jump into coding, let's first understand the meaning of static routing. Static routing means having predefined html templates for each route. The static routing is mainly used for  developing single page applications(SPA). 

You can download whole application from here. And I am using Visual studio 2013. 
The application structure looks like as shown below




The solution has "HtmlTempltes" folder, contains html templates and "Script" folder will contain common angular scripts in "AngularJs" sub-folder and routing related coding is in "TemplateRouting.js". The application has a home page(Parent page i.e Home.html) with a menu items on left side and right side page content panel(as shown in below image).

The "Home.html" head tag looks like below




The head tag includes reference for "angular.js", "angular-route.js" and "TemplateRouting.js". In order to achieve routing we need "angular-route.js". 
The "Home.html" page body tag looks like below




The "ng-app"("angApp") directive is decorated at div includes left menu and right content panel. Left menu has 4 link items. 
Default Template 
Template 1
Template 2 
Template 3 


Each left menu link item has a href (like #Default"). Basically we are including "#" in "href", so that the browser won't treat it as URL for redirection. After the value "#" tag in "href" will be considered as key and this key will be matched with the keys mentioned in the "TemlateRouting.js". My "TemlateRouting.js" is as follows



The "ngRoute" module provides routing and deep linking services. For more information about "ngRoute" please click here. "$routeprovider" is a angular provider which provides "$route" angular service. Depending upon the left menu item selection, the browser url will concatenated with href value of the link, as shown below

This key value will be matched with key mentioned in "TemplateRouting.js" file. And when key is matched, the respective html template mentioned in the "TemplateRouting.js" will be rendered in the right side content panel using "ngView". Please click here for more information about "ngView".


By default, the Default Template will be loaded. After that the respective templates will get loaded in the right side part of the page. If you concentrate on browser , then just right side content changes depending upon link selection but the whole page will not be loaded again and again.

Now you may wonder that when html template gets downloaded from server?
Run application and check the "Network" tab in developer tools. The "angular-route.js" internally makes http get call like as shown below.




Please check out "Request URL" which is path of html template and "Request Method" is "GET".

That's it from my side and have a nice day......

Tuesday 29 September 2015

Http Post and Get Web Api Calls using Angularjs

The main aim of this blog is to give information about how we can call web Api methods using angular "$http" services (for more info about "$http" click here) . I have created a  MVC4 application with web Api as project template in Visual Studio 2012.

Full source code is available here.

Before you read this blog, I hope you have some knowledge about angular js and its directives else please go through my last blog. Lets begin the show---

Basically I am trying to load a drop down on page load event using angular "$http" service by calling a web Api method. And also I am trying to post some hard coded data to the web Api method using angular post call. Meanwhile I am trying to maintain coding standards like separating Api call service from the angular controllers, which will help you to maintain your code clear and steady.

Initially I will explain the solution architecture, so that you can have clear picture about the application flow.



































HTML:




UI:



I have written one HTTP Get method and one HTTP Post method as shown below:




In Web API, "GetDropdownList()" method I am just sending a list of states with Id and in "GetResult" method, I am returning a string. The response of both methods are JSON serialized. Next, we need to provide route configuration. Hence I am using "WebApiConfig.cs" file. For more information about the web Api please click here.

Now let's start angular stuff. Before I proceed, there are many other ways to communicate with back end Api. We can make use of "$http" angular service or "ngResource" angular directive. If you are communicating with the REST Api then please go with "ngResource", because it reduces amount of code you right for communication. In this blog I am using using "$http" angular service. In next part of this blog I will try to explain you about "ngResource".

In web application, we usually need to communicate with Api from different locations of the angularjs controllers. So I prefer to wrap the web Api communication code in a angularjs service and call the service whenever you want. So I have created two folders within "Scripts". One folder will contain angular controllers and another will have services.



I have created two functions within "ApiCall" service, one is http GET and another one is http POST. For every web Api call we need Api controller name and method name. So whenever I call these methods, I will pass controller name, method name and data to post back to controller as parameters to the angular service to communicate with the back end. 

Now create a angular module and controller and call the service methods, as shown in below image.



Actually, the drop down will load during angular controller load (same as page load event in web forms) using "GetApiCall" of service. And I am passing controller name ("Values") and method name (GetDropdownList) as parameter. Make sure that you have decorated the web Api method as "[HttpGet]" or "[HttpPost]" attributes for respective method. If every thing goes right you will get returned data from web Api to the angular service with status. Parse the returned data and assign it to the drop down. 

While "Post API" button click, I am passing data object along with controller name and method name to the angular service. The angularjs "PostApiCall" will communicate with the "HttpPost" method "GetResult" and posts data object back to the controller.  Again if everything goes right then data will be returned to angularjs service along with the status. Initially the message vale will be "Don't give up", but once we get data from web Api through post Api method, the message value will be changed. 

I hope you have enjoyed the post and in next post I will try to explain "ngResource". Thanks for your patience. 

Friday 7 August 2015

AngularJs Basics

It is an open source web application JavaScript framework, in which we can use our HTML as template language. Don’t get confused with “HTML as template language” word. Usually we use HTML for designing static documents, but using angular (Angular Directives), we can extend our HTML as language to build web applications. At start things look like night mares. I will explain one by one, so that you can digest things easily.


Ex: Consider the following UI. 



In the above UI, I will enter some text in the first textbox and I click the button “Submit”. Once I click “Submit” button, the first textbox text will be assigned to label. Before Angularjs, we supposed to use JQuery libraries or JavaScript to accomplish this type of tasks.

I am using a JQuery library to fulfill the above requirement. Let’s jump directly into the coding stuff:
I have created a web application and included “jquery-1.10.2.js” JQuery library.

Code:



In the above code, I have textbox, button and a label. Now checkout the button tag, I am calling a JavaScript function “btnClick();”.

Well using AngularJs we can achieve the same requirement by using simple AngularJs expressions. Let’s check that:

Before coding we need to import latest version of Angularjs from here, click the download button and you will get the latest version. I am using Angularjs 1.4.3 version. Include the javascript file to the solution.

You can also use package manager console to include the latest Angularjs into the solution in visual studio by using the below mentioned command

PM> Install-Package Angularjs



By using the above code you can easily accomplish the task without using any JavaScript functions or JQuery libraries.

In the above code, first I have given reference to the Angularjs file.

Next, we need to define “ng-app”. “ng-app” is a built-in Angularjs directive. For more information about the Angularjs Directive, click here.

What is Angularjs Directive?
 Directives are HTML markers and it attaches a specific behavior to the DOM element.
In Angularjs there are many directives such as “ng-app”, ”ng-controller”, ”ng-click”, ”ng-model” etc.
For my application I need above “ng-app”, “ng-click” and “ng-model”.

ngClick Directive: Adds a specific behavior when an element is clicked. (For ex: Button Click event)
In the above example, I am assigning “InputText” to the “OutputText”.

For more information about the inbuilt Angularjs directives, click here.

If you need, you can create your directives. That’s why Angularjs is a cake box.
Actually I kept “ng-app” value blank (ng-app=”” ) in the above example, that’s because I can finish up the task using Angularjs Expressions instead of Angularjs Controllers.

Then what is Angularjs Controller and Angularjs Expressions?

Angularjs Controller:

As we have controller in MVC to control the data binding between model and view, the Angularjs controller also controls the data binding in Angularjs. Angularjs Controller is also a JavaScript file.

The data flow in the application if used Angularjs is something as shown in the below block diagram:



For more information about the Angularjs controller, click here.

Angularjs Expressions:
Angularjs expression evaluates the functions written in the HTM. Another way to define Angularjs Expression is, it will bind data to the HTML elements (ex: “{{OutputText}}” binds data to the label value).
Examples:
If we write {{2+2}} in HTML, when page loads, it will display 4.
In the above example, the value of “InputText” assigned to the “OutputText” variable during “ngClick” event.
And the “OutputText” variable is used in the Angularjs Expression, to bind data to the label.
Angularjs expressions work only if you have “ngApp” directive.

Some of the advantages of using Angularjs is as follows:
1.      Two way data binding, once you assign data to scope or variables such as “OutputText” in the above example, the Angularjs expressions resolve the value and binds to the label.
2.       Decouple data and the HTML view code.
3.      Angularjs is an independent framework as it doesn’t rely on any JQuery libraries.


Well, that’s it from my side. I hope my blog helped you to understand the basic need of Angularjs.

You can download the source code from here.

Monday 20 July 2015

Elasticsearch Using Nest


Elasticsearch is a search server based on Lucene. It provides a distributed, multitenant-capable full-text search engine with a RESTful web interface and schema-free JSON documents. Elasticsearch is developed in Java and is released as open source under the terms of the Apache License.
Background information about Elasticsearch Wiki.
To understand Elasticsearch, try the following link : ElasticSearch
In this blog, I will try to explain how we can use Elasticsearch in .net using NEST.

I have created the same application using visual studio 2013. You can download it from here.
Nest is a high level client that provides a strongly typed query DSL that maps one-to-one with the Elasitcsearch query DSL, and takes advantage of specific .NET features such as co-variant results. NEST internally uses, and still exposes, the low level Elasticsearch.Net client.
Elasticsearch provides API’s to build index and to implement text search.
Why we need to use Elasticsearch:
Just have a look over the below mentioned SQL Query.
In the above example, I am trying to join 4 tables in order to fetch required data. Meanwhile we need to take care of not having duplicate rows in the result. Let’s assume that table has around 10,000 rows and then this query will definitely hits the performance of the application. So it’s better to execute these queries and pull the results before hand and index these documents once. Later while searching, search over these index files and let the SQL to handle other operations. For more information watch this video.

Set Up:

  1. Download the latest version of Elasticsearch from here.
  2. Unzip it and copy it to local folder.
  3. Now we need to set JAVA_HOME variable.
  4. In C drive, within program files folder there will be a JAVA folder and within that folder jre folder.
  5. Open that folder and copy the folder path.
  6. Now open the command prompt and type as mentioned below
set JAVA_HOME=paste the folder path you copied earlier
  1. Then press enter. It will set the JAVA_HOME variable.
  2. Now in command prompt, redirect to the unzipped Elasticsearch bin folder.
  3. After redirecting, type in command prompt as mentioned below
elasticseach
  1. Then press Enter.
  2. This will activate the Elasticsearch.
  3. If everything goes right, you will get something like as shown in below image


  1. To check, elasticsearch is working properly, just open "http://localhost:9200/" in browser. You will get the following result as follows
{
  "status" : 200,
  "name" : "Scarlet Scarab",
  "cluster_name" : "elasticsearch",
  "version" : {
    "number" : "1.6.0",
    "build_hash" : "cdd3ac4dde4f69524ec0a14de3828cb95bbb86d0",
    "build_timestamp" : "2015-06-09T13:36:34Z",
    "build_snapshot" : false,
    "lucene_version" : "4.10.4"
     },
         "tagline" : "You Know, for Search"
         }

  1. Now open visual studio and open a console application.
  2. Install NEST using package manager console using following code

PM> Install-Package NEST

            
     
      Now your application has a reference to Elasticsearch.

Let’s jump into coding stuff.

Class:

public class SearchBook
    {
         public int BookId { get; set; }
         public string BookTitle { get; set; }
         public string BookAuthor { get; set; }
    }

First add Namespaces required:

using Nest;

Code:

       var node = new Uri("http://localhost:9200");
     //” http://localhost:9200”---server where Elasticsearch instance is hosted

   var settings = new ConnectionSettings( node, defaultIndex: "my-application");
  // defaultIndex- Is by default and we can change it to our specification later while creating index.

      var client = new ElasticClient(settings);

Above code is common while creating, updating and deleting the index. I will explain one by one.

 Create Index: Let’s create an index for an object.

           SearchBook objSearchBook = new SearchBook();

         //Load the class object, you can load your object with data from sql or any other db
           objSearchBook.BookId = 1;
           objSearchBook.BookTitle = "Fantastic";
           objSearchBook.BookAuthor = "Sam";

       // Create Index -- Index is generated with book id as a primary key

         var CreateIndexResponse= client.Index(objSearchBook,i=>     i.Index("index").Type("search").Id(objSearchBook.BookId));


NOTE: Before running this code make sure that the “ElasticSearch” service is running, which I did it using command prompt (Don’t close the prompt).

      After executing last line you will get the response in “CreateIndexResponse”. And the result is as shown below:





In the response, you can check the “Created” value is “True”, it means the index generated successfully. Huh! You did it….

  Search: Let’s search the book details based on id and author name.


var searchResults = client.Search<SearchBook>(s => s.Index("index").Type("search").From(0).Size(10).Query(q => q.Term(p => p.BookId, 1)));



NOTE: Before running this code make sure that the “ElasticSearch” service is running, which I did it using command prompt (Don’t close the prompt).

After executing the above line of code, you can see the result in “searchResults” as shown below image:


Search Based On Book ID:

string searchString = "sam";
var SearchBkByBookId = client.Search<SearchBook>(s => s.Index("index").Type("search").From(0).Size(10).Query(q => q.Match(m => m.OnField(p => p. BookAuthor).Query(searchString))));


In the above query “searchString” is matched with only BookAuthor column values, if you need to match the “searchString” with multiple columns, you can use “OR” condition within “Match” query.

Note:

We can use “Term” or “Match” query, the problem with the “Term” query which I used in the first search method is that query does not analyze the search term. That’s why “Term” query are case sensitive.

The “Match” query uses the same analyzer which is used while generating the index. Hence “Match” queries are not case sensitive. So you use the proper query based on your search specifications.

“From()” and “Size()” is to limit your search result. It’s like start and end point. Consider if we got 500 hits after searching for a text, and we need only top 50 results the just mention “From(0)” and “Size(50)”.

There many other ways to implement search, you can find them here.


Bulk Indexing:

When we have more records to index, we can use Bulk() API. 

For trial purpose I am adding two objects to a class list. I hope you will get data from data source to the list.


 SearchBook objSearchBook = new SearchBook();
 List<SearchBook> lstSearchBook = new List<SearchBook>();
  //Load the class object, you can load your object with data from sql or any other db
            objSearchBook.BookId = 1;
            objSearchBook.BookTitle = "Fantastic";
            objSearchBook.BookAuthor = "Sam";
            lstSearchBook.Add(objSearchBook);

            objSearchBook = new SearchBook();
            objSearchBook.BookId = 2;
            objSearchBook.BookTitle = "Great";
            objSearchBook.BookAuthor = "Sunny";
            lstSearchBook.Add(objSearchBook);

// Bulk Index Generation-- We will index the lstSearchBook list objects.
            var descriptor = new BulkDescriptor();

            foreach (SearchBook book in lstSearchBook)
            {
                descriptor.Index<SearchBook>(op => op.Index("index").Type("searchbooks").Document(book));
            }

            var BulkIndex = client.Bulk(descriptor);         

After executing the last line, you will get the response in "BulkIndex" as shown below:

I hope my post helps you to understand and implementing Elasticsearch in your application.