Introduction to Gulp.js

Gulp is a Javascript Task runner. When we are creating Javascript, Html and CSS there’s a lot of little things that we have to do to basically prepare our code either running in a development environment or in production environment.For example minifying and concatenating , adding vendor prefixes, Less to CSS Compilation, Injecting Files Into HTML, Angular Template Cache, Code Analysis and more to our code.

Main API’s In Gulp

  1. gulp.task
  2. gulp.src
  3. gulp.dest
  4. gulp.watch

Installing Gulp

Gulp is created by using Node.js. So you have to install Node.js first , after that we can install gulp and gulp packages using NPM

You can download Node.js from here

In order to get start with Gulp , You have to install it Globally and then install dependent packages and then code your task.

gulp

Create your first Gulp Task

Typescript Error : duplicate string index signature angular 2

I got this error after installing the jQuery typings .The error is because of you have installed the definition files into multiple locations in your project. Both globally and locally. For get rid of this error you have to remove either of this definition files from your prooject.

npm remove @types/jquery –save-dev

Hope this helps

Reconstruct and execute javascript functions dynamically

In some scenarios , we have to reconstruct and execute javascript functions dynamically.

//function name to be reconstruct
 function add(a,b) {
 console.log("Result is : " ,a + b);
 }

//regular expression for converting the source code 
 let regExp = /\((.*)\).*\{([\s\S]*)\}/m;
 let sourceCodeParts = regExp.exec(add.toString());
 var functions = {};
 functions["add"] = new Function(sourceCodeParts[1], sourceCodeParts[2]);

//execute the function
functions["add"].apply(null, [8, 2]);
 

 

Output : Result is : 10

Create extension for Visual Studio Team Services

Visual Studio Team Services

Package management enables scenarios where your team needs to share packaged software components within the team or with other teams.Here I am going to create a new Team Services Package by using npm. If you don’t have npm , please install Node.js for windows.

https://nodejs.org/en/

In order to package the extension, you should run a tfx-cli(TFS Cross Platform Command Line Interface ) command using npm .

  • Go to Node.js command prompt and type the command npm i -g tfx-cli and press enter

one

  • Create a new folder somewhere on your local disk for example C:\MyCave\TeamServices\helloworld
  •  Navigate to the above directory from Node.js command prompt

2

  • Once you navigate to the directory use the ‘npm install’ command to retrieve the SDK :npm install vss-web-extension-sdk  and press enter. It will download some files

3

  • Open the helloworld folder from Visual Studio as website for edit
  • Create a new HTML page for your hub. the method init() and notifyLoadSucceeded() will initialize the sdk.

4

  • Add an icon to the img folder that identifies your extension
  • create extension manifest that describes your extension. for this create a JSON file (vss-extension.json ,for example) in the home directory

You can download JSON file from here –  https://plnkr.co/edit/l9eKrr?p=catalogue

6

  • Edit the JSON file – package name, path, version etc
  • Navigate to root directory where vss-extension.json placed and run the command tfx extension create –manifest-globs vss-extension.json for creating the package.

7

  • When you open your directory you could see the package file

8

Enjoy programming…

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

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());
}