the calling order in angular js

Here's the calling order:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

Here's a simple demo where you can watch each one executing (and experiment if you'd like).

Example:

index.html

<div ng-app="myApp" ng-controller="myCtrl">

    <div test1 test2> </div>

</div>

index.js

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

myApp.factory('aProvider', function() {

   console.log("factory");

});

myApp.directive("test1", function() {

    console.log("directive setup");

    return {

        compile: function() {console.log("directive compile");}

    }

});

myApp.directive("test2", function() {

    return {

        link: function() {console.log("directive link");}

    }

});

myApp.run(function() {

    console.log("app run");

});

myApp.config( function() {

    console.log("app config");

});

myApp.controller('myCtrl', function($scope) {

    console.log("app controller");

});

Order Of execution:

app config

VM61:64 app run

VM61:51 directive setup

VM61:53 directive compile

VM61:72 app controller

VM61:59 directive link

Difference between constant and value

A constant can be injected anywhere.

A constant can not be intercepted by a decorator, that means that the value of a constant should never be changed.

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

app.constant('PI', 3.14159265359);

app.controller('appCtrl', function(PI) {

    var radius = 4;

    // calculate area of the circle

    var area = PI * radius * radius;

});

Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.

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

app.value('greeting', 'Hello');

app.config(function ($provide) {

    $provide.decorator('greeting', function ($delegate) {

        return $delegate + ' World!';

    });

});

Template rendering by using ng-include directive

Ng-include:

Fetches, compiles and includes an external HTML fragment.

template1.html

<h1> Hello !! I am from template1 </h1>

Index.html

<div ng-controller="ExampleController">

  <h1>Hello From index</h1>

  <div>

    <div ng-include="template1.html "></div>

  </div>

</div>

Output:

Hello From index

Hello!! I am from template1

How to efficiently check if variable is Array or Object

How to efficiently check if variable is Array or Object

a = [1,2,3]

[1, 2, 3]

a.constructor === Object

false

a.constructor === Array

true

a = [1,2,3]

[1, 2, 3]

a = {'name' : 'ggg', 'age': '52'}

Object {name: "ggg", age: "52"}

a.constructor === Array

false

a.constructor === Object

true

Reuse html code snippet in angular

<script type='text/ng-template' id="mySnippet"> 
   <h1> Reuse this template </h1>
</script> 

<ng-include src="'mySnippet'"></ng-include>
<ng-include src="'mySnippet'"></ng-include>

script

Load the content of a <script> element into $templateCache, so that the template can be used byngInclude, ngView, or directives. The type of the <script> element must be specified astext/ng-template, and a cache name for the template must be assigned through the element's id, which can then be used as a directive's templateUrl.