Feb 27, 2016

Calling AngularJS Function From Outside The Scope

Sometimes you may want to call a function in angular scope from outside the scope. For an example will say you have an AngularJS Controller which contains a function to do something. And you have another button outside the this controller. You can use below method to do it so.

Lets see initially how our controller looks like.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr/>
</body>
<script type="text/javascript" >
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });
</script>
</html>

Now lets say you wanted to call the "sayHello()" function from outside the controller. First what you should do is get the scope of the controller which contains the method you wanted call to a variable. In order to that first you should have sort of an identification to the controller. Simply you can give id to the container which contains the controller. Then you can simply apply it to the scope.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div id="mySec" ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr>
    <br />
    <input type="button" value="Say Hello From JQuery" onclick="callAngularFunction()">
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });

    function callAngularFunction() {
        var scope = angular.element(document.getElementById("mySec")).scope();
        scope.$apply(function () {
            scope.sayHello();
        });
    }
  
</script>
</html>

Hope you had what you are looking for.

Feb 13, 2016

[Fixed Solution] Check For The Existence Of Option In Select Using JQuery

In this article I'm going to show you all, how to check for <option>'s existence in a <select> tag. Their are many ways to do this. Lets see a simple way of it.

First lets have a look on my drop down.

<html>
<body>
    <select id="ddMember">
        <option value="Nifal">Nifal</option>
        <option value="Asjad">Asjad</option>
        <option value="Dinesh">Dinesh</option>
    </select>
</body>
</html>

Now lets say you wanted to check for the existence of the member "Gowtham" in the above drop-down. Use below java script codes to check it.

1	var isExist = $('#ddMember option:contains("Gowtham")').length;

Above code will check for the given option. If value is not exist it will return zero(0). Otherwise it will return some other number, depending on the occurrences.

Lets say, you wanted check for a option and if not available you wanted add it to your drop-down, simply use your below codes to do it.

1
2
3

if($('#ddMember option:contains("Gowtham")').length){
  $('#ddMember').append("<option value="Gowtham">Gowtham</option>");
}

Hope you found, what you looked for.

Jan 4, 2016

Using Date Time Pickers In AngularJS

You may have used many Date Pickers using JQuery. In AngulrJS also you can use JQuery way to create Date Pickers. But it's not good way to do it. Because you will dynamically create multiple Date Pickers. So you have to initialize all of the Date Pickers after it's loads to the DOM. Otherwise it won't give you the Date Pickers. In AngularJS, it's slightly different. In AngularJS, You may have to use a AngularJS Directive to bind it.

Before doing it in AngularJS, lets see how we can do using JQuery. Lets Start With JQuery UI Date Picker. If you don't have the java script files, please download the below files.

Copy the below codes and view it in a browser. You will get the JQuery UI Date Picker.

<html>
<head>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
</head>
<body>
    <label>Date</label>
    <input type="text" id="datepicker" />
</body>
<script type="text/javascript" >
    $(document).ready(function () {
        $("#datepicker").datepicker();
    });
</script>
</html>

Now lets do it in AngularJS way. Hope you have basic knowledge of module and all. First of all add the AngularJS file. Then define the "ng-app" in <body> tag.

Now we need to create a directive and add it our app as below.

var app = angular.module('app', []);
app.directive('datepicker', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

Lets see the full code now.

<html>
<head>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css"></link>
    <script src="angular.js" type="text/javascript"></script>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
</head>
<body ng-app="app">
    <label>Date</label>
    <input datepicker="" ng-model="mydate" type="text" />
</body>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.directive('datepicker', function () {
        return {
            require: 'ngModel',
            link: function (scope, el, attr, ngModel) {
                $(el).datepicker({
                    onSelect: function (dateText) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(dateText);
                        });
                    }
                });
            }
        };
    });
</script>
</html>

If you run this code in browser, you will get the JQuery-UI Date Picker same as what we got using JQuery.

There are many Date Pickers and Date Time Pickers with different implementations. Above example used JQuery-UI Date Picker. Lets see some of other Date Pickers and Date Time Pickers. I found the following Date Picker and Date Time Picker given by XDSOFT plugin.

Lets see how we can use this plugin in our AngularJS Applications. First of all download the resources from below link.

xdsoft.net datetimepicker

Lets see how we can implement this in JQuery.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.datetimepicker.full.js"></script>
</head>
<body>
    <h3>DatePicker</h3>
    <input type="text" id="pickerDate" />
    <br /><br />
    
    <h3>DateTimePicker</h3>
    <input type="text" id="datetimepicker" />
    <br /><br />
    
    <h3>TimePicker</h3>
    <input type="text" id="pickerTime" />
</body>
<script type="text/javascript">
    $(document).ready(function () {
        
        $('#pickerDate').datetimepicker({ 
            timepicker:false,
            format:'d/m/Y',  
        });
  
        $('#datetimepicker').datetimepicker({});

        $('#pickerTime').datetimepicker({
            datepicker:false,
            format:'H:i',
            step:15
        });

    });
</script>
</html>

Copy the codes and view it in a browser. You will get the XDSoft Date Pickers.

Now lets create a directive for the XDSoft Date Pickers.

var app = angular.module('app', []);

app.directive('XDSoftDP_Date', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
  timepicker:false,
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

app.directive('XDSoftDP_Time', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
  datepicker:false,
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

app.directive('XDSoftDP_DateTime', function () {
    return {
        require: 'ngModel',
 link: function (scope, el, attr, ngModel) {
     $(el).datetimepicker({
  onSelect: function (dateText) {
      scope.$apply(function () { 
                        ngModel.$setViewValue(dateText);
             });
   }
     });
        }
    };
});

Hope you understood how it works. Like this you can add any of options given by the pickers. Simply add those options available in JQuery to AngularJS Directive.

Dec 16, 2015

Quick Start To ASP.NET Web API 2

In this article, I will explain how you can use ASP .NET Web API 2. ASP .NET Web API is a framework which provides by .NET Framework. We can use ASP .NET Web API's to create restful services. ASP .NET Web API released with MVC 4. That's a small description about ASP .NET Web API.

Lets start from the beginning. You can either create an empty web api project or by creating asp .net wep application and then adding web api's to it. That's completely depend on your and project style. Sometimes you may want to add api's to existing project. So in this kind of situation you have to add web api's configurations to it. Anyway to develop asp .net web api it won't be an issue.

Lets learn this is easy way first.First we should know how this works. Then it will be easy to add manually.

Lets Start.

Go To File -> New Project.

If Empty Web API Project, Then

Or Else MVC Web API Project

In My Example I Have Created An Empty Web API Project. My Solution Explorer Looks Like Below.

Lets Add A Controller To Our Project. Right Click Controller Folder In Solution Explorer.

Then You Will Get Window Like Below.

No Need to Go To Deep First. Select "Web API 2 Controller with read/write actions". This Will Give You Necessary Methods. After You Click "Add", It Will Ask You To Give A Name For Your Controller. Give What Ever Name You Want. But Make Sure It;'s Ends With Word "Controller". I'm Giving As "DefaultController", Which Automatically Comes. After Giving A Name To Controller Press "Add". You Will Get Your Controller Just Like Below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace QuickStartToWebAPI.Controllers
{
    public class DefaultController : ApiController
    {
        // GET: api/Default
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET: api/Default/5
        public string Get(int id)
        {
            return "value";
        }

        // POST: api/Default
        public void Post([FromBody]string value)
        {
        }

        // PUT: api/Default/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE: api/Default/5
        public void Delete(int id)
        {
        }
    }
}

You Will See By Default, Controller Has Created Five Different Methods. Lets Check Our Web API Is Working Fine. Run The Visual Studio Project. You Will See Your Browser Started A New Tab Like Below.

Don't Worry If Your Getting Something Like This. This Is Because, We Have Not Specify The Web API Yet. Go To Your Browser URL And Call Your Web API Like Below. Just After Your Domain "/api". Then Your Controller Name, But Don't Type The Controller Word Here.

http://localhost:50076/api/Default

Now If You Run You Will Get The Browser Just Like Below.

If You Are Getting This Mean You Are Successfully Calling Your Web API Method. If You Keep Break Pints In All Your Methods In Web API, U=You Will See Its Calling "Get()" Method. In Order To Call The "Get(int id)", Adjust Your URL Like Below. That Means Your Passing A Parameter To Your Web API Controller.

http://localhost:50076/api/Default/2

Hope You Had Good Start With ASP.NET Web API 2. You Can Improve Your Web API By Getting Data From Database. Rather Giving Some Default Values Like Our Example.

Dec 15, 2015

Use Optional Parameters For Methods In C#

In C# You Can Create Methods With Optional Parameters. Which Means, When You Are Calling The Method You Don't Need Pass All The Parameters. If You Want You Can Ignore The Optional Ones. Then Methods Will Take The Defaults Values. Important Thing In Optional Parameter Is, You Have To Give A Default Value To The Optional Parameters.

Lets See How We Can Do This. I Have Create A Simple Console Application. In That Create A Static Method Called "SayHello" Which Takes Two String Parameters As "First Name" And "Last Name".

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Optional_Parameter
{
    class Program
    {
        static void Main(string[] args)
        {
            SayHello("Nifal", "Nizar");
            Console.ReadLine();
        }

        static void SayHello(string firstName, string lastName)
        {
            Console.WriteLine("Hello {0} {1}", firstName, lastName);
        }

    }
}

If You Run This You Will Get The Output In The Console As Below.

Hello Nifal Nizar

Lets Make The "Last Name" Parameter Optional. Simply In The Method Give A Default Value To The "Last Name" Parameter. In My Case I'm Giving Empty String To It. Lets See The Code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Optional_Parameter
{
    class Program
    {
        static void Main(string[] args)
        {
            SayHello("Nifal");
            Console.ReadLine();
        }

        static void SayHello(string firstName, string lastName = "")
        {
            Console.WriteLine("Hello {0} {1}", firstName, lastName);
        }

    }
}

Now Run And See The Output.

Hello Nifal

Same Like This You Can Make More Optional Parameters. Hope You Got The Knowledge Of Optional Parameter.

Creating A Table In AngularJS With Filters

In This Article I'm Going To Explain You Guys About Creating A Table In AngularJS Using Repeat (ng-repeat) Along With Filters. AngularJS Repeat Used To Bind HTML Elements Once for Each Item In An Array Or Object Of Data.

Lets Start From The Bottom. Below Codes Give A Simple Table.

<html>
  <body>
    <table border="1">
      <tr>
         <th>Name</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
        <td>158</td>
         <td>Nifal</td>
         <td>25</td>
      </tr>
      <tr>
        <td>122</td>
        <td>Dinesh</td>
        <td>24</td>
      </tr>
      <tr>
        <td>133</td>
        <td>Asjad</td>
        <td>21</td>
      </tr>
      <tr>
        <td>134</td>
        <td>Hudhaifa</td>
        <td>22</td>
      </tr>
      <tr>
        <td>165</td>
        <td>Gowtham</td>
        <td>24</td>
      </tr>
    </table>
  </body>
</html>

Lets See How We Can Create Above Table With AngularJS Code Along With A Data Array Which Contains Array Of Students. First Of All I'm Creating A Controller Which Gives The Students Object Array.

var app = angular.module('myApp', []);
app.controller('StudentController', function ($scope) {
    $scope.Students = [
          { Id: 158, Name: "Nifal", Age: 25 },
          { Id: 122, Name: "Dinesh", Age: 24 },
          { Id: 133, Name: "Asjad", Age: 21 },
          { Id: 134, Name: "Hudhaifa", Age: 22 },
          { Id: 165, Name: "Gowtham", Age: 24 }
      ];
});

Now Lets Use This Controller And Bind It To The Table Using AngularJS Repeat And Expressions.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th>Id</th>
           <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students">
          <td>{{Student.Id}}</td>  
          <td>{{Student.Name}}</td>
          <td>{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
           { Id: 158, Name: "Nifal", Age: 25 },
           { Id: 122, Name: "Dinesh", Age: 24 },
           { Id: 133, Name: "Asjad", Age: 21 },
           { Id: 134, Name: "Hudhaifa", Age: 22 },
           { Id: 165, Name: "Gowtham", Age: 24 }
         ];
        });
    </script>
  </body>

Lets Say, You Want To Print The Row Number In The Table. In Order To Do That You Can Use The Table Index ($index). Just Treat The Index As A Variable And Bind It. Normally Index Starts With Zero. So Add One To It.

1	<td>{{$index + 1}}</td>

Lets Say, You Want To Style The Table By Giving Different Colors To Table Rows. You Can Use $even And $odd To Do That. Use AngularJS If Condition(ng-if) To Do That.

<tr ng-repeat="Student in Students">
  <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
  <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
  <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
  <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
  <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
</tr>

You Can Use Filters As You Wish When You Looping Through It. Lets Say, You Want To Order The Table Data Using Students Age. Use "orderby" Filter.

1	<tr ng-repeat="Student in Students \| orderBy : 'Age' ">

See The Full Code Below, Which Used All The Things We Discussed Above.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="StudentController">
      <table border="1">
        <tr>
          <th></th>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
        <tr ng-repeat="Student in Students | orderBy : 'Age' ">
          <td ng-if="$odd" style="color:red">{{$index + 1}}</td>  
          <td ng-if="$even" style="color:blue">{{$index + 1}}</td>  
          <td ng-if="$odd" style="color:red">{{Student.Id}}</td> 
          <td ng-if="$even" style="color:blue">{{Student.Id}}</td>   
          <td ng-if="$odd" style="color:red">{{Student.Name}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Name}}</td>
          <td ng-if="$odd" style="color:red">{{Student.Age}}</td>
          <td ng-if="$even" style="color:blue">{{Student.Age}}</td>
        </tr>
      </table>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('StudentController', function ($scope) {
            $scope.Students = [
                { Id: 158, Name: "Nifal", Age: 25 },
                { Id: 122, Name: "Dinesh", Age: 24 },
                { Id: 133, Name: "Asjad", Age: 21 },
                { Id: 134, Name: "Hudhaifa", Age: 22 },
                { Id: 165, Name: "Gowtham", Age: 24 }
            ];
        });
    </script>
  </body> 
</html>

Hope You Enjoyed The Article.

Dec 10, 2015

Binding Data To HTML Drop Down Using AngularJS With Defaults

In AngularJS, You Will Find Few Ways To Create Drop-downs. Lets Start From The Beginning. Lets See How Simple Drop-down Going To Be.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
      <span>Customer Name</span>
      <select>
        <option value="1">Nifal</option>
        <option value="2">Dinesh</option>
        <option value="3">Asjad</option>
        <option value="4">Hudhaifa</option>
        <option value="5">Gowtham</option>
      </select>
    </div>
  </body> 
</html>

If You See The following Code In The Browser You Will Get A Simple Drop Down. Lets Use AngularJS To Create The Drop-down. In This Example I'm Going To Show You, Two Different Ways To Do This. First Is By Using "ng-repeat". Lets Start Doing It. In Order To Get The Names I Will Be Using A "ng-controller".

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
          { Id: 1, Name: "Nifal" },
          { Id: 2, Name: "Dinesh" },
          { Id: 3, Name: "Asjad" },
          { Id: 4, Name: "Hudhaifa" },
          { Id: 5, Name: "Gowtham" }
      ];
});

Now Lets Use This Controller And Create Drop-down. In Order To Build The Drop-down I'm Looping Through The "Customers" Array In The "<option>" Tag. In Order To Bind The Value & Text To The "<option>" Tag I'm Using AngularJS Expression.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select>
        <option ng-repeat="Customer in Customers" value="{{Customer.Id}}">
          {{Customer.Name}}
        </option >
      </select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. Now Lets See How We Can Improve Our Drop-down Using AngularJS "ng-options". In This Method We Won't Use "ng-repeat". In The "<select>" Tag It Self We Should Use "ng-options" To Load The Drop-down.

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers"></select>

If You Run The Above Code You Won't Get The Drop-down. But If You Inspect Element, You Will See Your "<select>" Tag. But You Won't Get Options In It. Even After Using "ng-options", You Have To Specify The "ng-model".

1	<select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>

Lets See The Full Code.

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="CustomerController">
      <span>Customer Name</span>
      <select ng-options="Customer.Id as Customer.Name for Customer in Customers" ng-model="MyCustomer"></select>
    </div>
    <script type="text/javascript" >
        var app = angular.module('myApp', []);
        app.controller('CustomerController', function ($scope) {
            $scope.Customers = [
                { Id: 1, Name: "Nifal" },
                { Id: 2, Name: "Dinesh" },
                { Id: 3, Name: "Asjad" },
                { Id: 4, Name: "Hudhaifa" },
                { Id: 5, Name: "Gowtham" }
            ];
        });
    </script>
  </body> 
</html>

If You Run The Above Code You Will Get The Drop-down. But With A Blank Option Like Below.

This Is Happening Because, "ng-options" Will Check For The "ng-model"s Value. But Its Empty. You Can Overcome By Giving A Value To Your Model In The Controller.

var app = angular.module('myApp', []);
app.controller('CustomerController', function ($scope) {
    $scope.Customers = [
         { Id: 1, Name: "Nifal" },
         { Id: 2, Name: "Dinesh" },
         { Id: 3, Name: "Asjad" },
         { Id: 4, Name: "Hudhaifa" },
         { Id: 5, Name: "Gowtham" }
      ];
    $scope.MyCustomer = 3;
});