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.

factories in angular

Factory is used for large code but to expose some of the variables and functions that are useful. factory return an object.

Syntax:

myModule.factory("factoryName", function(){
//code goes here
return {
// functions/varibles to expose
}
});


Example:
angular.module('myApp.factory',[]).factory('myfactory', function(){
function calculteArea(s) {
var area = s * s;
alert(area);
}
return {
areaOfScure: calculteArea;
}
});

Inject factorynamr in controller to use it's methods.

angular.module('myApp.controller',[]).controller('demoController1',['$scope','myfactory',function($scope, helloService){
myfactory.areaOfScure(10);
}]);

output:

return an alert with 100 as area.

services in angular

Service:

Services is a singleton object. It will create instance only for the first time, after that it will reuse that object.

syntax:
angular.module("module_name").service("service_name", function(){
//constroctor function
})

Example:
angular.module('myApp.service',[]).service("helloService", function(){
this.name = "saritha",
this.company = "cts"
this.display = function(){
alert(this.name);
}
});

Inject this service module into another module to reuse.

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


In controller we can use it as:

angular.module('myApp.controller',[]).controller('demoController1',['$scope', 'helloService',function($scope, helloService){
helloService.display();
}]);

output: output the alert

advantages:
Easy to create object,
Less time to execute,
Reusabuluity

drawbacks:
It is very difficult to execute for larger code.

Constant in angular:

A constant can be injected everywhere. A constant can not be intercepted by a decorator, that means that the value of a constant should never be changed (though it is still possible to change it programmatically in Angular 1.x).

Syntax:

.constant(name, value);

name --> name of constant

value --> value of constant

Example:

var myAppangular.module('myApp', []);

myApp.constant("clientId", "123456");

myApp.config(['clientId', function(clientId){

console.log(clientId);

}])

myApp.controller('myController',['clientId', function(clientId){

console.log(clientId);

}])

so, the difference between constant and value is constant inject in  config block but value can't

Value in angular:

A value is nothing more than a simple injectable value. The value can be a string, number but also a function. Value differs from constant in that value can not be injected into configurations, but it can be intercepted by decorators.

Syntax:

module_name.value('name', 'value')

name --> instance name

value --> the value of instance

Example:

1, Create a module

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

2. Add value to module

myApp.value("clientId", "123456");

3, Inject value to your controller function to use it

myApp.controller('MyController', function (clientId) {

  console.log(clientId);

});