$resource vs. $http

$resource vs. $http

$http $resource
$http is for universal purpose. It is an Ajax call. $resource warps $http for use in RESTful web APIs.
$http is built into the AngularJS framework. $resource needs to add the module separately.
$http is good for quick retrieval. $resource is good for conditions slightly more complex than $http.
$http is injected directly into an AngularJS controller by the developer. $resource does not allow us to do much with data once it is consumed in the application. …

Ref: https://www.safaribooksonline.com/library/view/mastering-angularjs-for/9781783553983/ch06s04.html

Errors and Exceptions Handling in JavaScript

Errors and Exceptions Handling in JavaScript

There are three types of errors in programming:

(a) Syntax Errors:
Syntax errors, also called parsing errors, occur at compile time in traditional programming languages and at interpret time in JavaScript.

(b) Runtime Errors:
Runtime errors, also called exceptions, occur during execution (after compilation/interpretation).

(c) Logical Errors.

Array: Getting max height using sort() and push() methods

Array: Getting max height using sort() and push() methods

Getting max col height and applying for all cols

  • Created an arrays
  • Pushed all col height in this array
  • Applied descending sort method
  • Getting index[0] value after descending sorting
  • Applied on all columns as height
var getMaxHeight =function (){
     var height= [];
     $('#cols li').each(function(){
          height.push($(this).height()+2);
          console.log($(this).height());
     });
     console.log(height);
     var ascArray = height.sort(function(a, b){return b - a});
     console.log(ascArray);
     var maxh = (ascArray[0]);
     console.log(maxh);
     $(codeols li').height(maxh);
}
Type of Arrays

Type of Arrays

Arrays are a special kind of objects, with numbered indexes.

  • Regular or Basic arrays
    Simple array

    • var myArray = [12, 24, 48];
  • Associative arrays
    Arrays with named indexes are called associative arrays (or hashes).
    JavaScript does not support arrays with named indexes.
    In JavaScript, arrays always use numbered indexes.
    In JavaScript, objects are also associative arrays (or hashes).

    • var person = [];
      person[“firstName”] = “John”;
      person[“lastName”] = “Doe”;
      person[“age”] = 46;
      var x = person.length;     // person.length will return 0
      var y = person[0];          // person[0] will return undefined
  • Multidimensional arrays
    Multidimensional arrays allow you to store arrays within array, a kind of “array-ception” or nested array.

    • var array = [[“Matthew”, “27”], [“Simon”, “24”], [“Luke”, “30”]];`
  • Sparse arrays
    No value in the 1st element, it is undefined

    • var hobbies = [ “a”, ” “, “c”, ” “, “e”];
  • Homogeneous arrays
    An array that stores a single data type(string, int or Boolean values).

    • var array = [“Matthew”, “Simon”, “Luke”];
    • var array = [27, 24, 30];
    • var array = [true, false, true];
  • Heterogeneous arrays
    It can store mixed data types.

    • var array = [“Matthew”, 27, true];
  • Jagged arrays
    Similar to multidimensional array with the exception being that a jagged array does not require a uniform set of data

    • var array = [[“Matthew”, “27”, “Developer”],[“Simon”, “24”],[“Luke”]];

 

console.log('--OBJECT---------------------------------------------------');
var obj = {0: 'apple',1: 'orange',2: 'pear',3: 'banana','fav': 'fig'}
for (var i in obj) {
console.log( i + ': ' + obj[i] );
}


console.log('\n\n\n');
console.log('--OBJECT WITH ARRAY----------------------------------------');
var myArray = { customer : ["tom", "dick", "harry"], age :[23, 42, 18]};
// loop over array elements/properties
for (var i in myArray) {
console.log(i + ' : ' + myArray[i] );
}


console.log('\n\n\n');
console.log('--Loop over array elements/properties-----------');
var array2 = [["a",{x:1, y:2}], ["b", {x:3, y:4}], ["c", {xx:33, yy:44}, {cc:33, dd:44}]]; 
// loop over array elements/properties
for (var i=0; i<array2.length; i++) {
console.log('Inner array'+[i+1] +'--' + array2[i]);
}

console.log('\n\n'+"and-----" +'\n\n');

for (var i=0; i<array2.length; i++) {
//console.log(array2.length);
for (var j=0; j<array2[i].length; j++) {
//console.log(array2[i].length);
// console.log( 'count - ' + (j+1) +': ' + array2[i][j]);
for (var k in array2[i][j]) {
console.log(k+' : ' +array2[i][j][k]);
}
//console.log(array2[i][j].x); //PRINT EACH INNER ARRAY'S VALUES INDIVIDUALY
}
}

console.log('\n\n\n');
console.log('--MULITDIMENSIONAL ARRAY-----------------------');
var numeric = [['input1','input2'],['input3','input4'],['input5','input6'],['input7','input8'],['input9','input10']];
for (var i=0; i<numeric.length; i++) {
console.log('Inner array'+[i+1]+'--' + numeric[i]); //PRINT EACH INNER ARRYA VALUES 
}


console.log('\n\n\n');
console.log('--MULITDIMENSIONAL ARRAY-----------------------');
for (var i=0; i<numeric.length; i++) {
for (var j=0; j<numeric[i].length; j++) {
console.log(numeric[i][j]); //PRINT EACH INNER ARRAY'S VALUES INDIVIDUALY
}
}

Hoisting in JavaScript

Hoisting in JavaScript

Hoisting is JavaScript’s default behavior of moving all declarations to the top.
A variable can be declared after it has been used.
A variable can be used before it has been declared.
JavaScript only hoists declarations, not initialization.
To avoid bugs, always declare all variables at the beginning of every scope.

var x = 5;  // Initialize x
console.log("x is " + x + " and y is " + y);
var y = 7;  // Initialize y
//Result:  x is 5 and y is undefined
Public/Private Variables and Methods

Public/Private Variables and Methods

  • private variables are declared with the ‘var’ keyword inside the object, and can only be accessed by private functions and privileged methods.
  • private functions are declared inline inside the object’s constructor (or alternatively may be defined via var functionName=function(){...}) and may only be called by privileged methods (including the object’s constructor).
  • privileged methods are declared with this.methodName=function(){...} and may invoked by code external to the object.
  • public properties are declared with this.variableName and may be read/written from outside the object.
  • public methods are defined by Classname.prototype.methodName = function(){...} and may be called from outside the object.
  • prototype properties are defined by Classname.prototype.propertyName = someValue
  • static properties are defined by Classname.propertyName = someValue

 

Reference URL…

http://phrogz.net/JS/Classes/OOPinJS.html

angular.copy and angular.extend

angular.copy and angular.extend

First you need to know shallow and deep copy in javascirpt.

shallow copy and deep copy

  • Shallow copy has the top level object and points to the same object.
  • Deep copy has all of the objects of the copied object at all levels and points to the different object.

angular.copy(source, destination) :
It creates a deep copy of source object or array and assign it to destination where ‘destination’ is optional. By writing deep copy, we mean that a new copy of the referred object is made.

angular.extend(destination, src1, src2 …) :
It creates a shallow copy of one or more sources provided and assign them to destination.

Ajax call in Angularjs

Ajax call in Angularjs

The $http service is provide the communication over the browsers using to XMLHttpRequest object or JSONP object.

The types of $http service

  •     $http.get()
  •     $http.head()
  •     $http.post()
  •     $http.put()
  •     $http.delete()
  •     $http.jsonp()
  •     $http.patch()

$http.get(‘/putUrl’).success(callback);
$http.post(‘/putUrl’, data).success(callback);
$http.put(‘/putUrl’, data).success(callback);

The $http service is an asynchronous call.
The $http() service returns a $promise that we can add handlers .then() method.

The $http.post() and $http.put() methods accept any object value or a string value in the place of data.

ng-app vs. data-ng-app

ng-app vs. data-ng-app

When we need to validate HTML Template that time we are using data-*  otherwise we are using simple ng-*.

Some time throw error on a property like ng-app but don’t throw an error with data-*  like data-ng-app.

For the conclusion we can say the only difference regarding HTML 5 validation and the best practice is used to data-ng-app not ng-app.

KnockoutJs also uses data-* attributes.

JS: need to know

JS: need to know

JS objects passed by reference.

In JS every object has a prototype. The prototype is also an object.

All JS objects inherit their properties and methods of their prototype.

The prototype property allow you to add property and methods to an object.

If you omit ‘var’ keyword to declearing any variable, it calls ‘window object’.

Object literal can not create private variables.

The document.getElementByTagName() method returns ‘HTML collection’.

JS arrays are an object. They inherit property and methods from object.

We use ‘instanceof Array‘ to check a variable is an array or not.

NaN == NaN will be  false because Nan is not equal to any value.

length and size returns number of elements in an object.

length is faster then size because size is a method and length is property.

jquery.data() method returns arbitrary data associated with DOM elements.

eq() method return a jquery object and get() method return a DOM object.