Transclusion in Angular js

The best way of think about transclusion is a Picture Frame.A picture frame has its own design and
a space for adding the picture.We can decide what picture will go inside of it.
Picture1
When it comes to angular we have some kind of controller with its scope and inside of that we will place a directive that supports transclusion. This directive will have it’s own display and functionality . In non-transluded directive, content inside the directive is decided by the directive itself but with transclusion,just like a picture frame,we can decide what will be inside the directive.

<body ng-controller=”appController”>
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>

Directive Template

<body ng-controller=”appController”>
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>

Directive
angular.module("app").directive('myFrame', function () {
return {
restrict: 'E',
templateUrl:"frame.html",
controller:function($scope){
$scope.hidden=false;
$scope.close=function(){
$scope.hidden=true;
}
},
transclude:true;
}
});

Source Code : https://plnkr.co/edit/Cnoa7E?p=preview

Custom Ajax service calls using $http in Angular Js and Typescript

In this article i am going to create a custom service for making Ajax request using Angular JS with Typescript implementation.
I have created a custom service named HttpService and abstracted all the HTTP API’s using angular $http service. You can reuse this custom service for making Ajax calls.

module App.Services {
export interface IHttpService {
get(url: string, config?: ng.IRequestShortcutConfig): ng.IPromise;
post(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise;
put(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise;
delete(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise;
}
}

module App.Services {
"use strict";
class HttpService implements IHttpService {
private $http: ng.IHttpService;
private $q: ng.IQService;
private $rootScope:ng.IRootScopeService;
static $inject = ["$http", "$q","$rootScope"];
constructor($http: ng.IHttpService, $q: ng.IQService,$rootScope:ng.IRootScopeService) {
this.$http = $http;
this.$q = $q;
this.$rootScope = $rootScope;
}
get(url: string, config?: ng.IRequestShortcutConfig): ng.IPromise {
var deferred = this.$q.defer();
this.$http.get(url, config).success(response => {
deferred.resolve(response);
}).error((data, status, headers, config) => {

deferred.reject("Error occured while processing the request");
});
return deferred.promise;
}
post(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise {
var deferred = this.$q.defer();
this.$http.post(url, data, config).success(response => {
deferred.resolve(response);
}).error((data, status, headers, config) => {

deferred.reject("Error occured while processing the request");
});
return deferred.promise;
}
put(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise {
var deferred = this.$q.defer();
this.$http.put(url, data, config).success(response => {
deferred.resolve(response);
}).error((data, status, headers, config) => {

deferred.reject("Error occured while processing the request");
});
return deferred.promise;
}
delete(url: string, data: any, config?: ng.IRequestShortcutConfig): ng.IPromise {
var deferred = this.$q.defer();
this.$http.delete(url, config).success(response => {
deferred.resolve(response);
}).error((data, status, headers, config) => {

deferred.reject("Error occured while processing the request");
});
return deferred.promise;
}
}
angular.module("App").service("HttpService", HttpService);
}

Usage

I have created one more Angular service for calling REST API’s by using our custom HttpService

module App.Services {
"use strict";
class SampleService implements ISampleService {
private httpService: App.Services.IHttpService;
static $inject = ["HttpService"];
constructor(httpService: App.Services.IHttpService) {
this.httpService = httpService;
}
getDataFromService(): ng.IPromise {
return this.httpService.get("api/Home/Get")
.then((response: ng.IHttpPromiseCallbackArg): ng.IHttpPromiseCallbackArg => {
return response;
});
}

}
angular.module("App").service("SampleService", SampleService);
}

Calling this Sample Service from a Angular Controller

module App.Controllers {
export class SampleController {
static $inject = ["SampleService"];
serviceData: App.Services.ISampleService;
message: any;
constructor(serviceData: App.Services.ISampleService) {
this.serviceData = serviceData;
this.serviceData.getDataFromService().then((serviceData: any): void=> {
this.message = serviceData;
});
}
}
angular.module("App").controller("SampleController", SampleController);
}

Ajax Loader using Angularjs

Introduction
In this article i am focus on How to implement Ajax Loader or busy Indicator using AngularJs
Custom Directive for loader
Angular Directives are markers of a DOM element. Using this you can create your own custom elements,custom events.

More about angular directives

Here i am going to create a custom attribute directive named busyindicator to show a busy loading indicator during Ajax call.


(function () {
"use strict";
angular.module("App").directive("busyindicator", busyIndicator);
function busyIndicator() {
var directive = {
restrict: "A",
link: function ($scope) {
$scope.$on("showBusyIndicator", function () {
$scope.canShow = true;
});
return $scope.$on("hideBusyIndicator", function () {
$scope.canShow = false;
});
}
};
return directive;
}
})();

If any http request is in progress , Angular JS will automatically update the anyRequestInProgress property to true on the scope object and once the request complete it will set back to false. In this directive link function i have created a angular watch function whenever if any changes in anyRequestInProgress property it will notify this method.

Apply the busyindicator directive to the html element as an attribute also the visible status property canShow to angularjs ng-show directive to hide and show the div.

 

//CSS for showing loader image in the center of a screen

#loaderdiv
{
display : none;
}
#loaderdiv.loader {
display : block;
position : fixed;
z-index: 100;
background-image : ‘loader.gif’
-ms-opacity : 0.4;
opacity : 0.4;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;
}


You no need to write any code for show & hide loader element . Our custom directive automatically handle this based on our service request.

$watch in Angular JS

When you create databinding in somewhere in the application on a scope , angular automatically created a watch internally , means it will listen the changes in the variable you bind.

Example
angular.module('app', []);
angular.module('app').controller('ctrl', function ($scope) {
$scope.size = 100;

});
angular.module('app').directive('heightDynamic', function () {
return {
link: function (scope, el, attrs) {
scope.$watch(attrs['heightDynamic'], function (newVal) {
el.css('height', newVal + 'px');
});
}
}
});

10-25-2015 4-59-11 PM

10-25-2015 4-59-36 PM

when the the value of the model ‘size’ changes, the size automatically set as a height of that div element.

Custom Click directive event using Angular Js

You can easily create a custom click directive using link function in angular js.

html source
ang1
I have added a custom attribute named custom-click in the button element for handling the click event which is similar to angular ng-click. Now i am going to write a custom directive for this custom attribute.

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

angular.module('app').controller('myController', function ($scope) {
$scope.obj = { message: "Not Clicked" };
$scope.callMethod = function (p) {
p.message = "Clicked!!";
}
});

angular.module('app').directive("customClick", function ($parse) {
return {
link: function (scope, element, attrs) {
var func = $parse(attrs["customClick"]);
element.on('click', function () {
scope.$apply(function () {
func(scope);
});
});
}
}
});

when you clicked the button you can see the message ‘Clicked !!’ in the h1 tag.