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

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.