Create AngularJs Factory using Typescript

module Dashboard {
export class LayoutServiceFactory {
static $inject = ["$q", "$http"];
private q: ng.IQService;
private http: ng.IHttpService;

constructor(private $q: ng.IQService,private $http:ng.IHttpService) {
this.q = $q;
this.http = $http;
}

getDataFromServer(serviceUrl) {
var deferred = this.q.defer();
this.http.get(serviceUrl, null)
.then(response => {

deferred.resolve((response) as any);

});
return deferred.promise;
}
static factory() {
var instance = ($q: ng.IQService, $http: ng.IHttpService) =>
new LayoutServiceFactory($q,$http);
return instance;
}
}
appModule.factory("LayoutService", LayoutServiceFactory.factory());
}

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.

Introduction to TypeScript

Introduction

Of course I am sure you have all noticed that javascript has gone through explosive growth over the last five years.We have gotten much better JavaScript execution environments like the Chakra engine and IE9 and IE10,Google’s V8. We have got HTML5 that actually has made the UI really be a very full fledged programming platform.But the fact remains that writing application scale JavaScript is very hard. JavaScript was really never designed to be a programming language for big applications.It’s a scripting language.It doesn’t have static typing,but more importantly perhaps it lacks some of the structuring mechanisms that you need in large applications like classes and modules and perhaps interfaces.We have noticed that a lot of people in the industry in order to write large JavaScript apps use tools like may be Google’s GWT or Script sharp which is an open source project that uses C#.

TypeScript is a language for application scale JavaScript development.More Detail TypeScript is a typed super set of JavaScript that compiles to plain JavaScript A compiler and a compile code work in any browser on any OS in any host and the compiler and all of the libraries everything is all opensource.
Basically all Typescript code is JavaScript code. All JavaScript libraries like Node, jQuery,underscore,backbone etc etc work directly with Typescript because it is just JavaScript.Those additions are optional static types,classes and modules.Those things are missing ,when you are writing large apps and trying to structure them and maintain them ans so forth.But the beauty of this is that it’s zero cost.All of those additional features compiled away in the resulting JavaScript.

Creating your first TypeScript application

Here i am using Visual studio 2012 for the demo application. You can download TypeScript for Visualstudio 2012 from here

https://visualstudiogallery.msdn.microsoft.com/fa041d2d-5d77-494b-b0ba-8b4550792b4d

After downloading Open VisualStudio 2012 and then navigate to File >> Open >> NewProject and then select TypeScript template

1

It will create a basic folder structure with a sample TypeScript file app.ts

2

How to create a new TypeScript File?

Right the project and add new TypeScript file

3

It will create a filename.ts Typescript file and also a mapping file and js file when we build the project. Here i am created demo.ts , So my mapping file and js will look like below

4

You can write TypeScript code in demo.ts file. I am going to create a new class named Animal with an constructor and method which display a message.

5

C# equivalent to the above TypeScript Code

6

Open index.html file and add a demo.js file . All the TypeScript code is converted to Javascript code at runtime.

Go and Run the index.html, It will pop up an alert message by displaying Cat as a message.

Converted Javascript code

8

Hope everyone understand how to create a basic TypeScript application