How to create constants in JavaScript?

Constants are immutable variables which value cannot be changed. Once, you have created a constant, its value cannot be changed.

image

While coding in JavaScript, many times you may have come across a requirement to create constants. Before ECMA Script 6, it was not very easy to create constants in JavaScript. In this post, I will show you to create constants in both ECMA Script 5 and ECMA Script 6.

Constants in ECMA 5

We can create a constant in ECMA Script 5 using Object.defineProperty(). First we need to find out, whether variable would be a global variable or part of the window object. Once that is determined, create variable by setting writable to false.

Object.defineProperty() function takes three parameters,

  1. Object for which variable should be created
  2. Name of the variable to be created
  3. Object to configure behavior of the variable.

Read full article on the Infragistics blog

How to print or enumerate properties of a JavaScript object?

I usually come across the following requirements,

  • How to print name of all the properties of an object?
  • How to print only the methods of an object?
  • How to print even non-enumerable properties of an object?

In this post, we will explore all the options to iterate and print properties of a JavaScript object. Let us consider the object cat, as shown in the listing below:

By default, for all properties of an object enumerable is set to true. So right now, if we print description of cat’s canRun and name properties using the Object.getOwnPropertyDescriptor, we will find enumerable value true for the both properties.

As you notice besides enumerable, configurable and writable are also set to true.

image

Let us start with printing all properties which enumerable is true.

Printing all enumerable properties using for..in loop

We can print all enumerable properties either own or inherited of cat object using JavaScript for..in loop.

Using the for..in loop, all enumerable properties can be iterated. Above for loop will print all the enumerable properties of cat object.

Read full article on the Infragistics blog

Recap: Angular 2 Road Trip – Coimbatore

Recap of Angular Road Trip – Ahmedabad

Recap of Angular 2 Road Trip – Gurgaon

Recap of Angular 2 Road Trip – Indore

image

To start with, I thank my employer Infragistics for all support in making these community events, specially Angular 2 road trip successful. We have awesome set of controls for your AngularJS 2, MVC, jQuery etc. application. I request to have a look and please download free trial of Ignite UI here

image

I would like to thank Biztalk 360 for organizing this event. Without their support, it was not possible.

On 15th October, I hosted fourth event of my Angular 2 Road Trip. Read more about Angular 2 here . This time, it was turn of city Coimbatore from South India to show the love for Angular 2 and there were around 90-100 developers attended the event.

image

We started at 11 am with Advanced JavaScript. In this three-hour session, we mainly focused on Objects and Prototypes. At the end of two hours of JavaScript, we came up with below diagram.

image

After JavaScript session , we took the lunch break. And after lunch, we started Angular 2. It was a mixed corwd so, we started slwowly and then moved to advanced topcis of Angular 2.

image

In three hours, we covered following topics in Angular 2,

  • Setting up development environment in VS Code
  • Understanding Bootstrapping
  • Understanding Modules
  • Understanding Components
  • Creating first component
  • Creating Service
  • understanding Routing
  • Performing CRUD operations using http
  • Forms and user input validation
  • Routing

I was very motivated and inspired to do better seeing participations and passion of the people. I must thank each attendee for their support in successfully execution of the event.

image

I would like to thank each attendees and team Biztalk 360 for organizing and making this event successful.

image

Last but not least I would like to thank following inspiring people for their support in making Angular 2 road trip successful.

Brad Green,

Dan Wahlin,

Glenn Block

Geard Sans,

Jaosn Beres ,

Todd Motto

image

Next destination is Bangalore. Thanks everyone.

Simplifying Objects, Inheritance and prototype in JavaScript

Although JavaScript is a Class-Free language, it supports objects creation, overriding properties/methods and inheritance. In this post, we will explore the concepts of object creation and inheritance.

In JavaScript, Objects can be created in three possible ways:

  1. An object as literal
  2. Using the function constructor
  3. Using the Object.Create method

Object as literal

A simple object Student – as an object literal – can be created as shown in the listing below:


var Student = {

    name: "dj",
    age: 32,
    Father: {
        'name': 'Ram',
        'occupation': 'service'
    },
    Subjects: [{

        name: "Physics",
        marks: 89
    },
	{

	    name: "Chemistry",
	    marks: 95
	}]
};

Above we have created an object called Student. There are three types of properties attached to Student: simple properties like name and age, complex properties like “Father”, and an array property called Subjects. We can read properties as shown in the listing below:


console.log(Student.Father.name);

for (var i in Student.Subjects) {
    console.log(Student.Subjects[i].name);
}

We can also have a function serve as the property of an object, which is known as the method. So let’s say we want to attach a method “Speak” to the Student object.  We can add the Speak method as shown in the listing below.


var Student = {

    name: "dj",
    age: 32,

};

Student.Speak = function (message) {

    var finalMessage = this.name + " has said :" + message;
    console.log(finalMessage);
};

Student.Speak("I am the best");

On calling Speak function as method, we will get output as shown in the image below:

There are some important points about the Speak method to remember:

  1. Properties can be added to an object at any time; a property can be added to an object after its creation too. For example, we added the Speak property later to Student object, rather than at the time of object creation.
  2. In the object’s method, the object is defined by value “this”. That is why we are able to print the name of the Student using this.name in the method.
  3. Calling a function as method is known as “Method Invocation Pattern”

In the above example, we are calling the Speak method on the object “Student”. So the value ofthis inside the Speak method is the Student object.

If we want to pass some other object as the value of “this” in the method, we can use the apply or call function. For example, we have one more object called Parents and,

  1. We are calling the Speak method of the Student object directly and the value of “this” in the Speak method would be Student.
  2. We are passing Parent as the value of “this” in the Student object’s Speak method. We are using the apply function to call the Student object’s Speak method and passing the Parent object as the value of this.

Read full article on the Infragistics Blog

How to Create a YouTube AngularJS Directive

I have often seen, developers come across requirement to embed a YouTube video in an AngularJS application. In this post, we will learn to create a simple YouTube AngularJS directive and also to use some of the popular directive from the GitHub.
We will follow step by step approach to create the YouTube custom directive. So let us start with create module and the controller.

var myApp = angular.module('myApp', []);
myApp.controller('VideoController', function ($scope) {
    $scope.video = 'zRtPUIumXcY';
});

Next we will create a custom directive with the isolated scope. Let us go ahead and create YouTube directive with following characteristics

  • Directive will be used as an Element
  • Directive will work in the isolated scope
  • Directive replace property is set to true, such that user will not able to view the directive information in the browser
  • In the template, iframe is used to play the YouTube video.
  • In the link function, we are watching the object passed to directive. Whenever value of object changed, directive will play the different video from the YouTube.

By putting all above together, directive is created as shown in the listing below:


myApp.directive('angularYoutube', function ($sce) {
    return {
        restrict: 'E',
        scope: { video: '=' },
        replace: true,
        template: '<div style="height:300px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="1" allowfullscreen></iframe></div>',
        link: function (scope) {
            scope.$watch('video', function (newVal) {
                if (newVal) {
                    scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
                }
            });
        }
    }
})

As you might notice in above listing that in the template, we are using the iframe to play the YouTube video. Also we are watching the value passed to the directive and constructing the URL using the $sce service of AngularJS.
On the view, angularYoutube directive can be used as shown in the listing below:

<div ng-controller="VideoController">
        <angular-youtube video="video"></angular-youtube>
    </div>

As of now, we should able to play a video in AngularJS application. Right now we are passing hard coded video code from the controller. We can allow user to pass the video code, just by using an input textbox as shown in the listing below:


<div ng-controller="VideoController">
        <input type="text" ng-model="video" placeholder="enter video code here to play"/>
        <hr/>
        <angular-youtube video="video"></angular-youtube>
    </div>


Here we have created a very simple custom AngularJS directive to embed the YouTube video in the AngularJS application.
For advanced scenarios, you may want to use Angular YouTube Embed . I find it very useful for advanced scenarios. I hope you find this post useful. Thanks for reading.

How to create Custom Filters in AngularJS

Have you ever used filters with the ng-repeat directive as shown in the listing below?

image

If so, then you’ve used a filter in an AngularJS application. AngularJS provides us many in-built directives like search. If required, AngularJS also allows us to create custom filters, which we’ll explore in this post.

AngularJS gives us a simple API to create a custom filter. You’ll remember that we use app.controller() to create controllers and app.module() to create modules. In exactly the same way, AngularJS has given us the angular.filter API to create a custom filter in AngularJS.

A custom filter can be created using the following syntax:

image

Read full article on the Infragistics blog

How to create an Azure-based real time Chat Application using Firebase and jQuery

In this post, we’re going to show you step by step instructions on how to create a Chat application that’s similar to a group chat messenger where many people at any given time can read and send messages with the group. In this example we’re going to use the following technologies:

  1. Firebase
  2. HTML
  3. Bootstrap
  4. jQuery

Eventually we will host the application on the Microsoft Azure website, and we’ll use Visual Studio IDE to develop the application.

You can see the real time chat application we are going to build in this article live at: http://igchatapp.azurewebsites.net/chat.html . Feel free to chat with us at this URL!

Setting up Firebase

Register on https://www.firebase.com/ and login to access the Firebase portal. In the right hand side, you’ll find the option to create a new app. Give your app a name and the URL to create a new app in Firebase.

Read the full article on the Infragistics blog

Simplifying the JavaScript Callback function for .NET developers

In JavaScript, functions are objects, and they can:

  • Be passed as an argument to another function
  • Return as a value from a function
  • Be assigned to a variable

Let’s assume that you have a JavaScript function (let’s call it function A) with the following properties:

  • Function A takes another function (let’s call this one function CB) as one of the parameters.
  • Function A executes the function CB in its body

In the above scenario, function CB is known as the Callback function. Let’s learn more about it using the following code:

Read full article on the Infragistics blog

Objects in JavaScript for .NET developers – Part 1

Read full article on the Infragistics blog

Here are some fun facts for you: JavaScript is not an object oriented language, but almost everything in JavaScript is an object. JavaScript does not have classes, and we can create an object from an object. A function can be used as a constructor, and returns a newly created object. Every object in JavaScript contains a second object called a prototype object.

If you’re coming from a .NET background, the sentences you just read probably don’t make any sense. But these are all true statements about JavaScript. And in this post we will focus on different ways to create objects in JavaScript

  1. Object as literal
  2. Creating an object using the new operator and constructors
  3. Creating an object using the Object.create() static method
Object creation as literal

The simplest way to create an object is by creating an object using the object literal. We can create a simple object as shown in the listing below:

Read full article on the Infragistics blog