angularJs run code after all elements/page has loaded

In some cases there is jQuery that needs to be run only after other angular directives/the page itself have completed (for example you may need to use the height of a div that changes based on content added by angular, or even access elements by class which is added by ng-class).

In this case, you use an empty timeout function in the angular controller and it will only run after all other angular elements have completed loading/processing.

<div id="myDiv" ng-controller="MyCtrl">

</div>

var MyCtrl = [
    '$scope', '$timeout',
    function ($scope, $timeout) {
        $timeout(function () {
            // code here
        }, 0);
    }
];

jQuery log messages into the console

When debugging jQuery or JavaScript code, alerts are simple ways to output messages or data to see how the code is working and if certain code is being run etc. However there are times where the presence of an alert is not ideal and can break the flow of the code (for example if you are debugging page scroll, the alert stops the scrolling).

That is where console logging can be of assistance. Modern web browsers all have a developer tools menu built-in out of box (generally available by pressing F12). This menu will have a console option which commonly displays JavaScript information and also allows you to interact with the page via command line. There are four different options for manually outputing messages to the console:

console.error("error"); 
console.log("log"); 
console.warn("warn"); 
console.info("info"); 

These then get output as the following:

SharePoint Object Model determine if current page is checked out to the current user

In some cases you may only wish to perform a given action if the page is currently checked out to the current user. The SharePoint object model in 2013 has a simple method for determining the checked-out state of the current page.

var isCheckedOut = false;

if (typeof (PageState) != "undefined" && PageState) {
    isCheckedOut = PageState.ItemIsCheckedOutToCurrentUser == "1";
}

jQuery convert a variable or string into a JSON object

I came across an example where I was given JSON data (custom object array) as a string in C# code behind. I then made it available to the front end jQuery/angularJs where it would need to be accessed as an object (to allow iteration).

The following line of jQuery will convert the variable into a JSON object which can then be used as such.

jQuery.parseJSON(myString);

SharePoint 2013 access image URL for custom image field on a page

When you have a custom field on a SharePoint page's properties (of image type) it can be necessary to simply get the image's URL rather than dealing with an image object. We can access the image URL (as a string) by using the following method.

var image = (ImageFieldValue)SPContext.Current.File.Item["ImageFieldName"];

if (image != null)
{
  string imageUrl = image.ImageUrl;
}

You can also access other fields of simple types (such as text) by using the following code:

var myTextField = (string)SPContext.Current.File.Item["TextFieldName"];