Module Pattern in JavaScript

In JavaScript, code encapsulation can be achieved using Modules Patterns. In addition, it is used to create private and public properties. There are various ways a module pattern can be implemented. In this article, we will learn to create a module pattern in ES5. Before we go ahead and start looking into implementation of the module pattern, here are some of the benefits:

  • Freeze the scoping
  • Code encapsulation
  • Creating private or public scope
  • Creating a namespace
  • Creating public and private encapsulation

We can implement a module pattern using JavaScript Object Literals and Immediately- Invoked function expression. Just to refresh your memory, an object literal will look like the below listing:

You can add properties after creation of object. Also, an Immediately- Invoked function expression looks like the example below:

With combination of these two, we can implement Module Patterns in JavaScript. Let us start with creating the module:

It is a self-contained module or an anonymous closure. It creates the scope for the function and everything is wrapped inside that function itself. So, when we tried to access price outside the function, it was undefined. Keep in mind that this anonymous module is present in the global scope.We can export the module by assigning it to a variable using expression, and then creating private and public encapsulation using the return statement. Consider below code:

We are doing following in above code snippet,

  1. Creating an IIFE.
  2. Assigning IIFE function to a variable
  3. Returning an anonymous object literal to create private and public encapsulation.

All properties of returned object would become public and can be accessed outside the module, however, any variable not part of the returned object cannot be accessed outside module. That is why for price we are getting 800 as the output, but, for color, value is undefined because it is private to the module1. Let us modify module1 to have more private and public properties, as shown in the listing below:

Read full article on the Infragistics blog

Simplifying Different Types of Providers in Angular

An Angular Service provider delivers a runtime version of a dependency value. Therefore, when you inject a service, the Angular injector looks at the providers to create the instance of the service. It is the provider that determines which instance or value should be injected at the runtime in component, pipes, or directives. There are many jargons involved here, so to understand purpose of types of providers, let us start with creating a service. Let’s say we have a service called ErrorService, which is just logging the error message.

Now, we can use this service in a component, as shown in the listing below:

We are importing the service, passing it in the providers array, and injecting it in the constructor of component. We are calling the service method on click of the button, and you can see error message passed in the console. Very simple right?

Here, Angular will rely on the values passed in the providers array of component (or module) to find which instance should be injected at the run time.

“A Provider determines that how object of certain token can be created.”

So, when you pass a service name in providers array of either component or module, like below:

Here, Angular is going to use token value ErrorService and, for token ErrorService, it will create object of ErrorService class. The above syntax is a shortcut of the below syntax:

The provide property holds the token that serves as the key for

1. locating the dependency value.

2. registering the dependency.

The second property (it is of four types) is used to create the dependency value. There are four possible values of second parameter, as follows:

1. useClass

2. useExisting

3. useValue

4. useFactory

We just saw example of useClass. Now, consider a scenario that you have a new class for better error logging called NewErrorService.

useExisting

Now, we want that instead of the instance of ErrorService, the instance of NewErrorService should be injected. Also, ideally, both classes must be implementing the same Interface, which means they will have same method signatures with different implementation. So now, for the token ErrorService, we want the instance of NewErrorService to be injected. It can be done by using useClass, as shown below:

The problem with the above approach is that there will be two instances of NewErrorService. This can be resolved by the use of useExisting.

Now there will be only one instance of NewErrorService and for token ErrorService instance of NewErrorService will be created.

Read full article on the Infragistics blog

Step by Step for Creating Your First Angular Element

Read full article on the Infragistics blog

Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.

We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.

Step 1: Installation

Create a new project using Angular CLI

ng new demo1

Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:

npm install @angular/elements

To work with older browsers, we need polyfill. So, let us install that also as shown below:

npm install @webcomponents/custom-elements

After installing polyfill, open polyfills.ts file and add these two entries:

Continue reading full article on Infragistics blog

Got Microsoft Most Valuable Professional (MVP) Award 9th times in nine consecutive years

I am excited to inform you that I have been awarded prestigious Microsoft MVP Award 9th times in nine consecutive years. You can learn more about MVP Award here: https://mvp.microsoft.com . I thank Microsoft for the award and recognition.

image

At time of writing, there are around 3000 MVP worldwide and around 75 MVP in India. Therefore, it is matter of sheer pride to be part of this exclusive group of professionals. First time I got this award in 2010 and since then I have been getting this award each year. You can find my profile here: https://mvp.microsoft.com/en-us/PublicProfile/4028360

image

To reward you, each year Microsoft evaluates your work for community. Last year, my contribution was as follows:

  • Organized India Angular conference ng-India : http://www.ng-ind.com
  • Number of articles : 35
  • Number of local user group speaking : 7
  • Number of conference speaking : 3

Mostly, I contributed in JavaScript, Angular, VS Code, and TypeScript hence got awarded in Visual Studio and Development category.

Getting Microsoft MVP award Ninth times in a row is overwhelming, and it was never possible without,

geek97 community . I am founder of geek97, which is one of the largest community of JavaScript developers in India. Geek97 hosts JavaScript and related frameworks workshops, events across India. Geek97 proudly organized ng-India India Angular Conference. I thank each members and attendees of geek97.

debugmode.net . This is my personal blog and I write articles here. I started this blog in 2009, and since then have written around 950 blog posts here. I thank all subscribers and readers of this blog.

Infragistics. I work as Developer Evangelist for Infragistics. Culture of my employer allows me to contribute to the community. I thank my team and everyone for all support and opportunity. Do not forget to check our awesome products here

Going forward in this year, I am aspired to focus on

  • Writing 8 articles per month on latest of Frontend Engineering
  • Hosting one user group event in various Indian cities on various topics of Frontend engineering
  • Organizing ng-Nepal, Nepal Angular Conference
  • Organizing ng-India, India Angular Conference

For any help you can reach me at debugmode[at] outlook [dot] com or tweet me at @debug_mode

Thanks

DJ

Microsoft MVP Since 2010.