DataBinding in {{AngularJS}} – Part 7


This is the seventh post in the series of AngularJS and today, we will discuss one of the features that we already used -Data Binding in details. For earlier posts of the series, please refer the links below

Learning {{AngularJS}} with Examples–Part 1

Learning {{AngularJS}} with Examples–Part 2

Learning {{AngularJS}} with ASP.NET MVC – Part 3

Learning {{AngularJS}} with ASP.NET MVC – Part 4

Learning {{AngularJS}} with ASP.NET MVC – Part 5

Learning {{AngularJS}} with ASP.NET MVC – Part 6

Let’s just take a quick look on our picture trackerpicture-tracker

Broadly, Data binding can be divided in the two parts
- One way binding
- Two way binding

One Way Binding – You must have seen/used One way binding at several times while using different templating mechanism. In a normal scenario, model (can be retrieved some services/database or generated on the fly)  and template, is used to render to view. Let’s see it pictorially

classicalbindingFrom the above image, we can understand that the model and template is using by the rendering engine and corresponding html is generated. This works as one time merging. But what would happen if the underlying data gets changed? Will that reflect on UI in the above scenario. Off course not because it is just one time rendering.

AngularJS provides a true data binding feature that makes sure that model and view are always in sync. It means if the underlying data gets changed, it gets reflected on UI at same time without taking any action. It enables us to allow to focus on data and make it a single source of truth. Angular takes the uncompiled HTML(also called template)  which includes all angular attributes,  binds it with the model and includes some watcher behind the scene to make sure that you always get live view. If the underlying data gets changes, these watcher notify and accordingly the corresponding the element on UI on changes.

AngularIn the above image, even once initially HTML is rendered with the provided data and template, Angular keeps a watch on the model and if it gets updated, it updates the UI accordingly. Let’s see this via an example.

For this demo, I am going to use the same example application that we created in 3rd post of the series. There we had a list of Talks that we displayed using ng-repeat. It was an example of one way binding. I will not explain the example application here. I will advise to go through the earlier post then continue (To view the post, Click here). Here I am going to show you another flavor of One way binding.  Let’s see the view (Index.cshtml)

Ex-1In the above screenshot, I have encircled that I added a button that calls a update method. Now let’s see the definition. It is in EventController.js as

Controller-1Here I have provided the definition of the update method and just updating name of the first object in this list for this demo. Now let’s run the application

onewaybindingThe list of talks contains four object and rendered on browser using one way binding. When we click on UpdateModel button, name in the first row got updated. And I just wrote the code to update the model in the method (not the UI element). So if your model gets updated any how then Angular makes sure that it reflects same on UI. This is the power of AngularJS.

Now, Let’s talk of two way data binding

Two way Data Binding – First, What is Two-way data binding? In simple terms

1- If the underlying data gets changes then corresponding UI elements gets changed.

2- When user enters/updates the UI elements then underlying model gets updated.

So first one, itself called as one way data binding that we discussed in my first section of the post. So how does two way binding works

two-waybindingFrom the above picture, we can understand that Angular makes sure that whenever a model changes, view gets updated and vice-versa. In this flow, controller is not involved at all.

Note- In the above picture, I have not shown that how initially view gets rendered using template.It is same as one way binding

To provide the above features, AngularJS provides another directive call ng-model that should be applied to each element on UI for which we want to use two way binding feature.

Working with Two Way Binding – As I mentioned in above post that to implement two way data binding, a directive ng-model is provided, it makes sure the underlying object gets updated as soon as it gets updated from UI.

I have updated the same example used above. In it, I have added couple of things which includes added a Delete button in each row, now duration column is editable and added a row which show the sum of all the Duration column. So let’s see view

<tr ng-repeat="talk in talks">
    <td> {{talk.id}}</td>
    <td> {{talk.name}}</td>
    <td> {{talk.speaker}}</td>
    <td> {{talk.venue}}</td>
    <td ng-click="ShowEdit()" ng-hide="editDuration"> {{talk.duration}}m</td>
    <td> <input type="text" ng-show="editDuration" ng-model="talk.duration"
    ng-mouseleave="HideEdit()" /></td>
    <td><input type="button" value="Delete" ng-click="deleteItem($index)" /></td>
</tr>
<tr><td colspan="4" style="font-weight: bolder"> Total Duration</td>
    <td style="font-weight: bolder"> {{TotalDuration()}}m</td></tr>

In above code, for duration I have added two columns (td), one contains the value (view Only) and another contains an input control but showing only one  td at a time. One new directive, I used in input control – ng-model, it enables two way binding. I added another column which has a delete button which deletes a row. On click of delete button, deleteItem is called which deletes an item from the model. Also I  added another row (tr) which show the sum of values of duration column. These new methods are added in the controller. Let’s see it

  $scope.editDuration = false;

    $scope.ShowEdit = function () {
        $scope.editDuration = true;
    };

    $scope.HideEdit = function () {
        $scope.editDuration = false;
    };

    $scope.deleteItem = function (index) {
        $scope.talks.splice(index, 1);
    }
    $scope.TotalDuration = function () {
        var sumofDuration = 0;
        for (var i in $scope.talks) {
            sumofDuration += parseInt($scope.talks[i].duration);
        }
        return sumofDuration;
    }

Here ShowEdit and HideEdit are simple, I am just setting a variable and based on that showing the View only or editable cell in the table. In deleteItem, index of the item is passed and the item is deleted from underlying model. In TotalDuration, I am just adding all the duration from the underlying model and returning it that is shown on TotalDuration row.

let’s see it running

two-waybinding_newIn the above example, we can see when we click the delete button that deletes the row which also updates total row as it depends on the underlying model. Similarly, when we edit a row and change the value to 190, Total Duration again gets changed.

This example is attached with the post.

Happy Learning,
Brij

Simple steps to scale up WCF srevices drastically

Every .NET developer must have written/used WCF services  many times in different projects. But as long as the usage of the service are limited, it works smoothly. But as the number of requests increases rapidly, things starts become ugly. If the number of requests goes beyond a limit at certain time interval, you may start seeing critical issues like service may stop taking new request. As you will read this post, you will come to know the huge potential of your services and unseen ceiling applied by default configuration

In this post, I will be discussing two major items that can tremendously boost the performance of your services
1- WCF throttling
2- System.NET changes

WCF Throttling

Before moving ahead, the basic question arises that  What is throttling?

In simple words, Throttling is a way to control or limit the number input(request) in a certain interval so that the resources at server stay at healthy state.

WCF throttling by default provides some throttling values set and allows us to configure that.

There are three main properties properties provided by default WCF throttling.

1- maxConcurrentCalls – How many number of request can be accepted by a service in a second.

2- maxConcurrentSessions – How many number of request can be processed by a service in a second.

3- maxConcurrentInstances – How many number of instances of service can be created by a service in a second.

Now let’s discuss one by one.

maxConcurrentCalls – denotes number of request can be accepted by service in a second. If the number of requests exceeds the set value, the request starting queuing up and if this goes on, the queue gets full and then further request start getting denied.

maxConcurrentSession – denotes the number of concurrent sessions in a second of a ServiceHost. If I elaborate it a bit, then in a sec, this number of requests can be in processing state.

maxConcurrentInstances – In a normal scenario (default case where we did not use any instance management) this number of instances can be created in a sec. So when a request comes to the service, a new instance is created to serve that request. Again if the number of instance throttle reached, no more instances would be created.

So before discussing further, can you think of any formula in these three?

So before wasting anymore time, let me reveal thatsum1.It means, say if we allow maxConcurrentcalls as X it means X instances would be made to handle at a specific point and maxConcurrentSessions as Y number of request that is getting processed which Y number of service instances. So  maxConcurrentInstances should be set as X+Y..

I hope you all got the ideas about these settings. Now You will be amazed to see the default value of these setting. These are

maxConcurrentCalls – 16
maxConcurrentInstances – 26
maxConcurrentSessions -10

So it means your service can take at max 16 calls and can have max 10 concurrent instances per sec. Don’t you thinnk that it is very less. In normal scenario if the service is consumed by a single client and number of calls per second is not much then you may not realize it.But if your service is consumed by 10 to 100s or more clients then some of the client start getting timeout or no response error from service.

Even I was working on a application which has WCF service, and it was getting more that 100 calls in a sec and WCF was silently started denying the request. After a lot of investigation I reached to the actual cause.

So now the bigger question – What should be the optimum value?

Now before moving further, the above values are default values if one is using .NET 4.0 or less. But if you are using the .NET 4.5, Microsoft made it dynamic and changed it significantly and as

maxConcurrentCalls – 16 times of number of processors
maxConcurrentSessions – 100 times of number of processors
maxConcurrentInstances -  Sum of maxConcurrentCalls and maxConcurrentSession.

Normally at our production servers, we used 8 or 16 or more processors. Correct. let’s see the value in case of 8 cores

maxConcurrentCalls – 144
maxConcurrentSessions – 800
maxConcurrentInstances -  944

Earlier which was used to in 10s per sec, which is now in 100s. Awesome!!

So if we are using the default values then we are just victim of a default ceiling and can set it in config file as

<serviceBehaviors>
...
  <behavior name="myServiceBehavior">
     <serviceThrottling maxConcurrentCalls="144"
	maxConcurrentInstances="944" maxConcurrentSessions="800" />
..
</serviceBehaviors>

if using earlier version of .NET framework 4.5 so we should modify it accordingly. If you are using .NET 4.5+ then you are lucky and can safely ignore it.

System.NET

If your application server and WCF service is hosted on different servers then it may be again major bottleneck. This contains the settings that says how many outbound request can be made at a time to another server. And the default value is 2 per IP. It can be pictorially shown as

system.netThis can be reset at machine level by changing machine.config or web.config/app.config for web application and windows based client respectively.

So what should be the optimum value. We can put it as per requirement say 100. But we should not put it to too high because if accidentally it started making calls to the service then it may be disastrous for our service. So make it reasonable and based on the requirement. It can be set as

<configuration>
...
<system.net>
  <connectionManagement>
    <add address="*" maxconnection="100" />
  </connectionManagement>
</system.net>
</configuration>

So I hope you enjoyed this post. Please feel free to share you precious comments.

Cheers,
Brij

Learning {{AngularJS}} with ASP.NET MVC – Part 6

It’s been around a month since I wrote the fifth part of the series on AngularJS. We have covered a bunch of concepts in our last five posts. I will advise to go first the earlier posts then continue reading it. Links of my earlier posts on this series are.

Learning {{AngularJS}} with Examples–Part 1

Learning {{AngularJS}} with Examples–Part 2

Learning {{AngularJS}} with ASP.NET MVC – Part 3

Learning {{AngularJS}} with ASP.NET MVC – Part 4

Learning {{AngularJS}} with ASP.NET MVC – Part 5

In our last post, we created a sample where we had a page that comprised two views : Talk details and Speaker Details. We fetched two sets of data (Talks and Speakers) from server via  AJAX call and rendered on the page using templates with the help of Angular rendering engine. In this application, we are going to use again the same application and add some more features which are relevant in our day to day coding.

In today’s post, we will use almost the same concepts that we discussed in our last post but use it for different scenario. Let’s put our picture tracker.

trackerHere I highlighted four components and we had already used it one or other ways in earlier posts. But we’ll discuss the new highlighted components briefly here as well.

Continue reading

Presented on AngularJS at C# Corner Delhi chapter event – 28th June

Hello All,

C# Corner again organized a fantastic full day event on 28th June where attendees got a chance to learn hot technologies and chance to hear big names like like Mr Mahesh Chand and Mr Pinal Dave. In this full day event, I presented one of the most discussed technologies, AngularJS. It was an awesome session which was full of knowledge, demos and humor. I covered the following points

  • Intro to AngularJS
  • First Angular Application
    • Controller
    • $scope
    • Expression
  • Flow of an Angular App
  • Another Demo
    • DataBinding
    • ng-repeat
    • Filter
    • Modules, Views and Controllers (All in one)

Continue reading

Learning {{AngularJS}} with ASP.NET MVC – Part 5

This is the fifth part in the series of AngularJS. We have discussed the basic components of AngularJS in our earlier posts. Please find the links of my earlier post on this series as

 Learning {{AngularJS}} with Examples–Part 1

Learning {{AngularJS}} with Examples–Part 2

Learning {{AngularJS}} with ASP.NET MVC – Part 3

Learning {{AngularJS}} with ASP.NET MVC – Part 4

So let’s move to series tracker and see what are we going to learn today.

structuctureSo far, we have discussed five main components. Today we will be discussing Views and Routing.

Continue reading

Got awarded Microsoft MVP fourth time in a row

Hello All,

imagesI am very happy to inform you all that I have been awarded Microsoft Most Valuable Award fourth times in a row. First time, I got this award on 1st July 2011 and getting it consecutively since then. It is really a great honor and matter of pride to me. I received this award ASP.NET/IIS category since beginning.

This award is never been possible without all of you. I would like to thank each one of you for your support and feedback. I will try to spend more time in community and sharing knowledge on various technologies.

Continue reading

Leverage output caching with IIS7.X and IIS8.X

Caching is one of key items that is being discussed whenever we talk about the performance of a web application. We always to use caching as a primary tool while designing and development of a web application. ASP.NET itself supports different kind of caching for handling various scenarios. Although we talk about it a lot, but I have seen that it is not implemented properly at most of the applications

I’ll not talk about it in detail about Caching in this post. Although I wrote an article on this topic in detail on www.codeproject.com long back, you can refer it for getting more information

State management and ways to handle Cache in a Web Farm/Web Garden scenario

Note : As this post was written long back (Apr 2011) some of part of could be old and may not be relevant in the current scenarios.

Let’s comeback to the topic. There are different ways to implement caching and one of the caching technique is called Output caching. But let’s understand that what is output caching?

Continue reading