Using HTML5 Web Workers with AngularJs

angularjs by google

Web workers introduced in Html5 provide a background mechanism to perform multi-threaded tasks. They add the ability to perform computationally heavy tasks like downloading or mathematical computation without hanging the user interface. Although AngularJS and web workers are both intended for asynchronous execution, both serve different purposes and should be used in conjunction.

Angular JS Promises

Deferred and promises set a reference to a result yet not available. Once resolve is called the result becomes available and the appropriate action is taken based on the result in the .then section.

Web Workers

Web workers on the other hand are used to perform actual work asynchronously. They are relatively light weight as they use operating system threads and hence are better suitable for computationally heavy, long running or periodic tasks.

Getting Started

First we set up the index.html page where testworker is the state used in the state provider. Clicking on Start Web Worker will load the template associated with the testworker into the ui-view.

Set up the application routing.

Set up the data binding.

Next we write the controller which makes the call to the external web worker file. The callWebWorker function spawns the new web worker, posts the url to download from and returns a promise object. Now the .then call will wait until the promise is resolved which happens in the onmessage callback. Once the web worker posts back the result, onmessage function is called. Inside the onmessage function, the resolve sends the data back to the calling function. On receiving the data the .then executes and the controller sets the result to the data binded workerReplyUI.

The webworker recieves the postmessage from the controller in the onmessage function. It initializes an HttpClient object to send a GET request to the server. When the GET request completes, the web worker posts the result back to the calling controller.


How to show Loader for $http calls in AngularJs ?

angularjs by google

Hello Readers !!  In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through the AngularJs official Developer Documentation.

So, lets begin, first of all we will be making simple loader UI with HTML and CSS. So our HTML will look somewhat as shown below.

Here I have used font-awsome’s spinner icon. You can keep same or can build your own loader/spinner, somewhat like this. Now let’s move to CSS part. Our loader should cover whole area of page and should not allow any actions unless all calls to server are finish. All we need to have div which will be having height and width 100% and z-index to be highest than all other elements. Below is exactly what we need

Next thing we will be adjusting our font-awsome’s spinner icon to center of our loader div with the help of following class

top and left values are as per my screen resolution, you can try adjusting them as per yours. Now lets move to angular part, we will be constructing a directive of attribute type with name loader. Following is code for it

Here we have added a watch $http.pendingRequests , which actually return number of calls made by browser which are in pending state. So all we need to do is whenever this number of pending calls are more than 0 then show our loader otherwise hide it. Now if you want to apply this for some specific calls for example, this loader should work only for API calls in my application and my API base is ‘/api’ so you can do it simply by adding this lines to scope.isLoading

J2EE Interview Questions

1) What is J2EE?
J2EE is an environment for developing and deploying enterprise applications. The J2EE platform consists of a set of services, application programming interfaces (APIs), and protocols that provide the functionality for developing multi tiered, and web-based applications.

2) What is the J2EE module?
A J2EE module consists of one or more J2EE components for the same container type and one component deployment descriptor of that type.

3) What are the components of J2EE application?
A J2EE component is a self-contained functional software unit that is assembled into a J2EE application with its related classes and files and communicates with other components. The J2EE specification defines the following J2EE components:

  • Application clients and applets are client components.
  • Java Servlets and Java Server PagesTM (JSPTM) technology components are web components.
  • Enterprise JavaBeansTM (EJBTM) components (enterprise beans) are business components.
  • Resource adapter components provided by EIS and tool vendors.

4) What are the four types of J2EE modules?

  1. Application client module
  2. Web module
  3. Enterprise JavaBeans module
  4. Resource adapter module

5) What does application client module contain?
The application client module contains: class files, an application client deployment descriptor. Application client modules are packaged as JAR files with a .jar extension.

6) What does Enterprise JavaBeans module contain?
The Enterprise JavaBeans module contains: class files for enterprise beans, An EJB deployment descriptor. EJB modules are packaged as JAR files with a .jar extension.

7) What does resource adapt module contain?
The resource adapt module contains: all Java interfaces, classes, native libraries, other documentation,  a resource adapter deployment descriptor. Resource adapter modules are packages as JAR files with a .rar (Resource adapter Archive) extension.

9) What is difference between J2EE 1.3 and J2EE 1.4?

J2EE 1.4 is an enhancement version of J2EE 1.3. It is the most complete Web services platform ever. J2EE 1.4 includes:

  • Java API for XML-Based RPC (JAX-RPC 1.1)
  • SOAP with Attachments API for Java (SAAJ)
  • Web Services for J2EE(JSR 921)
  • J2EE Management Model(1.0)
  • J2EE Deployment API(1.1)
  • Java Management Extensions (JMX)
  • Java Authorization Contract for Containers(JavaACC)
  • Java API for XML Registries (JAXR)
  • Servlet 2.4
  • JSP 2.0
  • EJB 2.1
  • JMS 1.1
  • J2EE Connector 1.5

The J2EE 1.4 features complete Web services support through the new JAX-RPC 1.1 API, which supports service endpoints based on Servlets and enterprise beans. JAX-RPC 1.1 provides interoperability with Web services based on the WSDL and SOAP protocols. The J2EE 1.4 platform also supports the Web Services for J2EE specification (JSR 921), which defines deployment requirements for Web services and utilizes the JAX-RPC programming model. In addition to numerous Web services APIs, J2EE 1.4 platform also features support for the WS-I Basic Profile 1.0. This means that in addition to platform independence and complete Web services support, J2EE 1.4 offers platform Web services interoperability. The J2EE 1.4 platform also introduces the J2EE Management 1.0 API, which defines the information model for J2EE management, including the standard Management EJB (MEJB). The J2EE Management 1.0 API uses the Java Management Extensions API (JMX). The J2EE 1.4 platform also introduces the J2EE Deployment 1.1 API, which provides a standard API for deployment of J2EE applications. The J2EE 1.4 platform includes security enhancements via the introduction of the Java Authorization Contract for Containers (JavaACC). The JavaACC API improves security by standardizing how authentication mechanisms are integrated into J2EE containers. The J2EE platform now makes it easier to develop web front ends with enhancements to Java Servlet and JavaServer Pages (JSP) technologies. Servlets now support request listeners and enhanced filters. JSP technology has simplified the page and extension development models with the introduction of a simple expression language, tag files, and a simpler tag extension API, among other features. This makes it easier than ever for developers to build JSP-enabled pages, especially those who are familiar with scripting languages. Other enhancements to the J2EE platform include the J2EE Connector Architecture, which provides incoming resource adapter and Java Message Service (JMS) plug ability. New features in Enterprise JavaBeans (EJB) technology include Web service endpoints, a timer service, and enhancements to EJB QL and message-driven beans. The J2EE 1.4 platform also includes enhancements to deployment descriptors. They are now defined using XML Schema which can also be used by developers to validate their XML structures.

Note: The above information comes from SUN released notes.

10) Is J2EE application only a web-based?
No. A J2EE application can be web-based or non-web-based. If an application client executes on the client machine, it is a non-web-based J2EE application. The J2EE application can provide a way for users to handle tasks such as J2EE system or application administration. It typically has a graphical user interface created from Swing or AWT APIs, or a command-line interface. When user request, it can open an HTTP connection to establish communication with a Servlet running in the web tier.

Also see : Java Interview Questions and Answers

Security Features in AngularJs

angularjs by google

  One of the major concerns with any new technologies is security. They might introduce security holes into an organization’s IT infrastructure. But if you are using AngualarJs then this concern isn’t very severe. Securing an AngularJS application is as simple as enforcing the good security practices for any web-application.
In this post I am going to take you through built in security features in AngularJs that you should keep in mind as you build your application. I will be also updating this post time to time whenever I got something new about Security in AngularJs.

So lets begin with AngularJS security features one by one.

 1. Expression Sandboxing

AngularJS’s expressions are sandboxed, this means AngularJs restricts the expression from evaluating unsafe expressions. These can attempt to access the Function constructor, window object, DOM element, global variables, or the Object constructor. With these restrictions, all an attacker can do is execute a mathematical function, call an already existing function of the application, or display and modify data from a scope variable. This limits the impact of an Angular injection. Although, the AngularJS documentation explicitly states that the sandbox’s purpose is to maintain a separation of application responsibilities. The sandbox isn’t available for the purpose of security. As a result, the AngularJS sandbox shouldn’t be considered a security boundary.

2. Cross Site Request Forgery (XSRF) Protection

Cross-site request forgery (XSRF or CSRF) is a method of attacking a Web site in which an intruder masquerades as a legitimate and trusted user, i.e. attacker can trick an authenticated user into unknowingly executing actions on website. Angular provides a mechanism to protect from XSRF. When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. The header will not be set for cross-domain requests.

You can also implement this explicitly by writing AngularJs Interceptor. Interceptors are bassically build for authentication,global error handling,or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses. With the help AngularJs Interceptors you can intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests.
To take advantage of this you need to implement few things on your server side. Your server needs to set a token in a JavaScript readable session cookie called XSRF-TOKEN on the first HTTP GET request. On subsequent XHR requests the server can verify that the cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that only JavaScript running on your domain could have sent the request. The token must be unique for each user and must be verifiable by the server (to prevent the JavaScript from making up its own tokens). It is recommend that the token is a digest of your site’s authentication cookie with a salt for added security.

3. JSON Hijacking Protection

If you don’t know what is JSON Hijacking then please go through this link. JSON Hijacking can be prevented by server side prefixing all JSON requests with following string “)]}’,\n”. Now AngularJs will automatically strip the prefix before processing it as JSON.

Reference / Source :

PHP Script to scan all ports of website or host

php code

Following is PHP code which will scan all ports of particular host / website and will print list of all open ports in result. This code can be use to probe a server or host for open ports. This is often used by administrators to verify security policies of their networks and by attackers to identify services running on a host and exploit vulnerabilities. ports scanning  is a process that sends client requests to a range of server port addresses on a host, with the goal of finding an active port; this is not a nefarious process in and of itself. The majority of uses of a port scan are not attacks, but rather simple probes to determine services available on a remote machine. So I will recommend to use it for making your servers more secure.

AngularJS router to use different template for Mobile and Desktop

In your AngularJS application, if you want to use different templates/views for mobile and desktop users then following script may be useful for you. What we have done here is, just wrote a function named as “_isNotMobile”. This function will return true/false by checking user agent of device. And also we have used that function inside AngularJs app’s router, before actually specifying template/view paths and that’s it! Simple!


CRUD Operations on JSON object using AngularJs

angularjs by google

AngularJS is a powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. In this post we are going to see the code for how we can perform CRUD (Create, Read, Update, Delete) operations on JSON object.


How to check if jQuery is already loaded in Magento


If you are building some custom extension for Magento and your extension includes jQuery, but you don’t want to load it if its already loaded by some other Magento extension or theme, then you can do so using your layout XML file as shown below. Here we are checking for the global window.jQuery variable. If that is undefined jQuery is not loaded yet. Add the following to your modules layout XML.

This will be included in the head after all other javascripts are loaded and you can be sure jQuery wasn’t included if its already there.

PHP code for removing unnecessary whitespaces from html

php code

Removing unnecessary white-spaces and extra characters from html source code, helps for improving overall rendering speed of web page. Specially in browser window. Following is simple PHP script which will remove all unnecessary white-spaces from html source. And thus minify it and improves rendering speed. Add this code in header of your PHP page to see the effect.


Creating custom category attribute in Magento


In this short article contains code for creating custom category attribute in Magento . Run this script from your magento root folder and it will create custom attribute of type int in General group. To test whether attribute is created or not Go to your magento admin panel > catelog > manage categories and user General tab you will see Most Popular Products attribute.