JavaScript Object References

Recently people asked me how JavaScript keep references while passing through function parameters including angular promise, underscore and normal JS code. I will provide one example from each section to show how references are passed.

Under Score (Lodash) Example

Some of the Underscore library functions return object reference while other returns new object. e.g. _.find method returns reference of the object that was found. in the following example when we change the value of variable "f.a", it affects "chkUnder" variable. While in case of _.where method, if we change the value of "w.a", it never changes the variable "chkUnder".

var chkUnder = [{ a: 1 }, { a: 2 }, { a: 3 }];
var f = _.find(chkUnder, { a: 2 });
f.a = 22;
var w = _.where(chkUnder, { a: 2 });
w.a = 24;

Angular timeout ($timeout) service promise

In angular JS, if you want perform some action after some time (or you want to wait for some time) you can use $timeout service. This service returns the promise which we can resolve by "then". In following example, it will take 2 seconds to call the function "toBeCalled".


function Controller($timeout) {

           wait(2).then(function () {

            })

            function wait(seconds) {
                return $timeout(toBeCalled, seconds * 1000);
            }

            function toBeCalled() {
                console.log("called after 2 seconds");
            }
        }

How to Know when your angular rendering is complete (Callback function for ngrepeat/ng-repeat)

There are scenarios when you need to know that angular rendering is complete due to ng-repeat directive. Here we need to understand that the success call back method of $http does not mean your rows are rendered. following is the scenario where we can utilize this ng-repeat callback method,
1- You may need to perform particular Jquery Method after rendering of rows is complete.
2- Format generated rows after they are rendered.
3- I needed this to use data tables object ( $('#tbl').DataTable();) after rendering is complete.

To start with, we need to write an attribute level directive which we can call like,

Adding Application Constants by removing Magic Strings in Angular applications

Defining App

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

Adding Constants

These constants are used to remove magic string from the application and user application level constants,

myApp.constant('AppConstants', (function () {
    var constants = {};
 
    constants.App = {};
    constants.App.Name = "My Application Name";
 
    constants.LocalStorage = {};
    constants.LocalStorage.profileKey = "profile";
    constants.LocalStorage.clientsKey = "clients";
 
 
    constants.clsProfile = {};
    constants.clsProfile.Email = "Email";
 
    return constants;
 
}())
 
);

How to add toaster in Angular JS

Index page:

 Open Home main (Container page) page  and add following references.
Remember, If you will add following lines in any of angular view, it will not work.

Reference:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.9/toaster.min.css" rel="stylesheet" />

<script src="https://code.angularjs.org/1.2.0/angular-animate.min.js"></script>




Add Toaster Tag


<toaster-container></toaster-container>

Angular JS $state.go redirects to home page

Topic

$urlRouterProvider.otherwise() called before $state.go()

Explaination

i faced above problem in one of my application. I needed to change the state on click event of anchor tag. User was being navigated to Otherwise route rather than redirecting to the route that was called on click event. following was my code,

<a ng-click="SetClient(Name)" href="#">{{Name}}</a>

function SetClient(stateName)

{

$state.go(stateName);

}

The following configuration is used for redirection if any other url is provided.

$urlRouterProvider.otherwise("/home");


The Problem

When ever i clicked on the hyperlink, it redirected to home state rather than the state name that was passed to SetClient. 





Solution

I found out that "#" hash sign is creating problem. i removed hash sign and it worked fine.

<a ng-click="SetClient(Name)" href>{{Name}}</a>




Hash sign was calling "$urlRouterProvider.otherwise".