Undocumented features of jQuery

Hi all

I am a big fan of jQuery but I never tried to read whole source code of jQuery. I know some of the tricks such as to get an object of events bound to a certain element you can use:

jQuery._data(jQuery('a')[0], 'events');

I Often use this for debugging purposes 🙂

Well!! David Aragon decided to read the source code to jQuery and found a variety of things he hadn’t expected. David wrote the wonderful blog – 18 Surprises From Reading jQuery’s Source Code and list out many undocumented features which surprise me a lot. But before using this please be careful as undocumented features can change without notice.

So take a look on David’s blog and get 18 surprises of jQuery 🙂

Nested view with ui-router

Hi All,

When creating single page applications, routing will be very important. We want our navigation to feel like a normal site and still not have our site refresh. UI-Router provides great flexibility and power when defining states and nested states in application.

AngularUI Router

The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

Example

Let’s go with sample application which demonstrates ui-router with nested view as well as with multiple view.

Continue reading

Faced Problem After Minifying AngularJS Application

Hello devs!

I would like to share the problem that I have faced after minifying my AngularJS Application.

First of all, What is Minification of the Application?? Minifying applications let’s you speed up your application with smaller file sizes. You can load the one minified file of all of your modules together, which makes it speed up as well as it’s easy to setup your application.

Now let’s go to what happens with me. To speed up my AngularJS application, I have do minification of it. But after minifying I found that my apps doesn’t works correctly. While my unminified version works well. Now it’s very difficult to found exact error in minified file. (This is the one drawback of Minification). But after sometimes I found what is wrong with my minified file.

I found that I have declare Model and controller something like this in my unminified JS file:

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

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

While I found the same code in my minified JS file is something like this:

var app=angular.module("myApp",[]);app.controller("mainController",function(e){e.variable_name="ANY MESSAGE"})

Here I can see that the $scope variable that was so crucial to my application has been turned into a tiny litter e. Angular will no longer know how to use that message that I declared.

Solution to Angular Minification

Now, what is the solution for this? After some googling I found two ways to fix this:

Solution# 1: Explicitly Inject Dependencies

We can use Angular’s $inject property on controllers as below:

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

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

mainController.$inject = ['$scope'];
Solution# 2: Inline Annotation

This is the easier of the two solutions. Once you get in the habit of declaring all your Angular modules like this, then you won’t ever have to worry about minifying problems. Here I’ve added $http into this example just to show how you would inject multiple things.

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

app.controller('mainController', ['$scope', '$http', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
}]);

This is what I learn the proper way to declare Angular modules, otherwise our Angular applications may not work correctly after minification. For more information, see the Angular docs (scroll down to A Note on Minification).