Mystery behind ng-Cloak

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

Following CSS which is defined as part of angular.js or angular.min.js makes it possible

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.

To ensure appropriate working for ng-cloak, usually angular.js or angular.min.js is loaded from head section. If not from head section then above CSS has to be incuded in the application’s style sheet.

the !important directive in CSS is a way to make your CSS cascade but also have the rules you feel are moTypically, if a user defines a style sheet to view web pages with, that style sheet will be over-ruled by the web page author’s style sheet. But if the user marks a style as !important, that style will overrule the web page author’s style sheet, even if the author marks their rule as !important.

This is a change from CSS1 to CSS2. In CSS1, author !important directives took precedence over user !important directives. CSS2 changed this to make the user’s style sheet have precedence.st crucial always be applied. A rule that has the !important directive will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

Angular Directive – Setting image height and width without changing the image aspect ratio

In case if you are showing an image in an web application and images are random and dynamic in nature with varying sizes, then we usually hit in to a challenge where we want to display these images in fix width and height. So quickest thing that you would do is set height and width of image to desired height and width, but this is going to cause your image to be rendered in distorted manner. Image’s aspect ratio is going to go for toss. So instead of setting image height and width set the max width and height of the image.

As an example have created a sample angular directive which does that.

In angular template below is image tag with custom attributes

<img src="http://loremflickr.com/320/240?random=1" image-resizing 
       image-Height="200px" image-Width="200px" />

Image which gets sent is of the size Height:240 and Width:320.

But image size is changed based on parameter which are passed image-height and image-height which are part of directive scope elements. Below is the code snippet for the directive

var imageResizing = angular.module('imageResizingModule', [])
// Image Resizing...
imageResizing.directive('imageResizing', [function () {
    return {
        restrict: 'A',
        scope: {
            imageHeight: '@',
            imageWidth: '@',
        },
        link: function (scope, element, attrs) {
            element.bind('load', function () {
                var imageElement = element[0];
                console.log("Image Height:" + imageElement.height);
                console.log("Image Width:" + imageElement.width);
                var imageSizeCSSClass = {};
                imageSizeCSSClass["max-width"] = scope.imageWidth;
                imageSizeCSSClass["max-height"] = scope.imageHeight;
                $(imageElement).css(imageSizeCSSClass);
            });
        }
    };
}]);

Interger /Number Array Sorting in Javascript.

Javascript arrays have the sort() method which sorts the items of an array. By default, the sort() method sorts the values as strings in alphabetical and ascending order.

var names = ["John", "Mary", "Amol", "Robert"];
names.sort();

It is an inplace sort for an array and sorted array would be some thing like this

["Amol", "John", "Mary", "Robert"]

However, if numbers are sorted as strings, “25” is bigger than “100”, because “2” is bigger than “1”. Because of this, the sort() method will produce an incorrect result when sorting numbers. You can fix this by providing a “compare function”

array.sort(compareFunction)

Compare function will look some thing like this

function compareFunction(a, b){
	return a-b
};

When the sort() method compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

So final number array example looks something like this.

var numberArr = [100, 1, 200, 150, 10, 20];
numberArr.sort(compareFunction);
function compareFunction(a, b) {
    return a - b
};