Talk in computer language.: January 2015

Sunday, January 18, 2015

Copy object in Angular using angular.copy() function

In JavaScript there are many ways to copy object into another object. AngularJS has built in function to copy one object to another object. In this example we will use angular.copy() function to copy object. Here is sample code to do it.

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

//Inject both service and Factory into controller

myapp.controller('myController', function ($scope, $http) {

var Address1 = new Object();

Address1.name = "Sourav";

Address1.City = "Kolkata";

Address1.phone = "1234567890";

var Address2 = angular.copy(Address1);

$scope.Address1 = Address1;

$scope.Address2 = Address2

});

</script>

Now we will implement view to reflect the model. Here is implementation of View.

{{Address1.name}} <br /> {{Address1.City}} <br /> {{Address1.phone}}

</div>

{{Address2.name}} <br /> {{Address2.City}} <br /> {{Address2.phone}}

</div>

</body>

Once we run the application, we will see that the Address2 object has populated as same of Address1 because we have copied it from Address1.

Here is sample output.

Friday, January 16, 2015

Understand service and factory in AngularJS

Service and factory are two important concepts of Angular. Both are very similar in terms of functionality but they are different.

Service : Service is singleton in fashion. That mean instance of service will create once for one application and all user will use same object. Here is syntax of service in Angular.

module.service( 'serviceName', function );

The first argument is service name and the second argument is one callback function, the function will contain service body. Here is sample code to implement service.

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

//Implement service

myapp.service('myService', function () {

this.returnData = function () {

return "From Service";

}

})

Factory : Factory is a function in Angular which allows user to add logic in a object before it created. Here is syntax for factory.

module.factory( 'factoryName', function );

Here is sample code to implement factory.

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

//Implement factory

myapp.factory('myFactory', function () {

var facObject = new Object();

facObject.returnData = function () {

return "From Factory";

};

return facObject;

})

Ok, so we have learn syntax of both service and factory. Now let’s implement both in single example. Have a look on below code.

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

//Implement factory

myapp.factory('myFactory', function () {

var facObject = new Object();

facObject.returnData = function () {

return "From Factory";

};

return facObject;

})

//Implement service

myapp.service('myService', function () {

this.returnData = function () {

return "From Service";

}

})

//Inject both service and Factory into controller

myapp.controller('myController', function ($scope, myFactory, myService) {

$scope.fromService = myService.returnData();

$scope.fromFactory = myFactory.returnData();

});

</script>

And here is the view.

{{fromService}} <br />

</div>

Once we run the application, we will see below output.

Thursday, January 15, 2015

Understand $scope and $rootScope in AngularJS

We know that Angular is very much modular everything is very much de-couple here. We know that the concept of two-way data binding is very popular in angularJS. The model will get update once data in view get change.

Now the question is, how the data will get change? Here $scope and $rootScope will come into picture. We can simply think $scope as glue which helps to attach model and view.

So, $scope is one service in angular which act as glue and attaches model to view. The concept is $rootScope is also similar. This is too one service of angularJS. Every application has a single root scope. All other scope are descendent scope of the root scope. Scope provide separation between the model and the view via a mechanism for waitching the model for changes.

Understand $scope in Angular

Let us understand the concept of scope with example. Here we have defined very simple module and controller.

We can observe that $scope service is injected to scopeTest1 controller and we are assigning some string to data model within controller.

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

myapp.controller('scopeTest1', function ($scope) {

$scope.data = "Scope data";

});

</script>

Now, we will implement view to reflect model data.

</div>

Here is sample output

Understand $rootScope in Angular

As discussed, $rootScope is very similar to $scope but present one in whole application. All $scope are child of root scope. If we attach any model in $rootScope then it will accessible from any controller as it has defined in root level. Let us implement it in one example.

We have attached two controllers in myapp module. Within scopeTest1 controller we have defined GlobalModel model and attached with $rootScope . Please note that we did not re defined it within scopeTest2 controller.

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

myapp.controller('scopeTest1', function ($scope, $rootScope) {

$rootScope.GlobalModel = "I am root scope";

});

myapp.controller('scopeTest2', function ($scope, $rootScope) {

});

</script>

Here is view where we will consume both controller.

</div>

</div>

And we are seeing that model within scopeTest2 controller is also get populated with $rootScope data.

Implement 2 way data binding in AngularJS

We all know that the best feature of Angular (not only angular, but many frameworks) is 2 ways data binding. If you are beginner of angularJS then you might know the concept but may not implement it practically, if so then this blog is for you.

Let’s discuss , what is 2 way data binding . Two way data binding helps to update view when the model change and update model when data in view change.

So, If we think in simple way, the two way binding is.

1) Update model when data in view change

2) Update view when data in model change

Update model when data change in view.

Here is the angular implementation. We have created one simple module and attached controller with it.

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

myapp.controller('myController', function ($scope) {

$scope.getData = function (login) {

alert(JSON.stringify(login));

}

})

</script>

Let’s implement view now. Have a look on below code.

</form>

</div>

We have implemented very simple login form, which contains “login” model. Now If we submit the form we will get data from login model. This is one of 2 way data binding.

Now we will update view from model. The typical scenario is , the view will automatically update when model data will get change. The model can get change from various data source like from service or from DB.

In this sample example we will update view from mode. The code is little modified of previous example.

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

myapp.controller('myController', function ($scope) {

$scope.showData = function () {

var loginDetail = new Object();

loginDetail.username = "sourav";

loginDetail.password = "kayal";

$scope.login = loginDetail;

};

})

</script>

We will modify the old view.

</div>

When we will click on Read Data button it will cal lto showData() function which we have defined within controller and the view will get update.

Tuesday, January 13, 2015

Is open source .NET will really help to Industry ? Game will remain unchange.

Whether you Microsoft’s fan or not! You will most likely to be aware of the news that Microsoft has made .NET framework and some other project open source. The historical announcement by Microsoft will definitely affect developer and Industry now onwards.

Let’s discuss the various and possible change we might see in market on because of open source of .NET.

First point first, .NET adapt cross platform ability. That means developers are not bind with Microsoft’s infrastructure (IIS/Azure) and Tool (Visual Studio) to develop .NET product. The alternate might be Apache server in Linux Box and Sublime (or kind of) Tool as IDE.

However, stop. Are people going to use those alternatives really? Let me ask you one question! We all know that .NET framework supports 100+ languages; did you use other than VB.NET or C# to develop .NET application? Or at least F#?

Very few developers may say that, yes, they have used C++ or VC++ . So the situation is something like that, Instead of many choices in our hand we like to use the best weapon in ware. The reason is not exceptional, that we know the weapon, its capability, range and power and it will help us to win in battle.

As per my experience, it will hold in this situation too. Sublime(some version) and Eclipse might free and available in market but Still Industry will choose Visual Studio for development because developer has used this weapon and they know it’s power and capability.

In the same way , people will blindly trust IIS or Azure as hosting platform of ASP.NET because it’s proven that ASP.NET best fir in this infrastructure.

Even Microsoft knows the game very well, If not why they are planning to release VS in each year and updating Azure with new ornaments.

So, If we think that Industry and Tool will change overnight, we are in wrong notion.

But the best part open source .NET is , It filled the gap between developer and Microsoft. Before making it open source, .NET was kind of Black box to developer, now it’s crystal clear. Developer can even take part in .NET framework development.

Definitely, it will increase community support, fixing of issue and innovation, which is good news for both developer and Microsoft. It might give extra millage to come C# beside of Java.