two way data binding in angular.js using ng-model

In angular js, we have two directives ng-model and ng-bind. For a novice like me, both of them may sound same until they are explored in depth. However, they are not. The big difference between the two is that ng-model supports two way binding and ng-bind does not.

To understand the two-way binding, suppose we have an input type control. We need to display the value entered in the control in any span or div tag, as the value is getting changed i control. Then we normally use jQuery or some event like 'key-up', to display the value, as it get's changed. However, in angular js, we can easily do this using the ng-model directive. 

Let's create a small example to understand this. First we create an input type control and bind it with a model property named "sampleValue", using the ng-model directive. 

<input type="text" ng-model="sampleValue">

Next, we will use the angular expressions to display the value in the span tag. So our code will look like:

You have entered: <span ng-bind="sampleValue"></span>

That's it, we are done. Run the application enter any value in the input type and see the value changes in the span tag also. See the image below:

So the complete code will look like the below:

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <fieldset>
            <legend>ng-Model Example</legend>
            <h4>Display the model data changed in the SPAN tag, using ng-Model</h4>
            <p>
                Enter a value:
            <input type="text" ng-model="sampleValue">
            </p>
            <p>You have entered: <span ng-bind="sampleValue"></span></p>
        </fieldset>
        <br />
    </div>
</body>
</html>

Hope you liked reading it....Happy coding...!!!

Error: [ngModel:nonassign] http://errors.angularjs.org/1.4.5/ngModel/nonassign?p0

While working with angular js, i encountered an issue of the following type:

Error: [ngModel:nonassign] http://errors.angularjs.org/1.4.5/ngModel/nonassign?p0


I researched a bit and found that the issue occurs due to the fact that I was trying to call a controller function using the ng-model, which is not correct.

Just call the function using the following syntax:

  <span>{{ calculateSum() }}</span> 

or 

  <span  ng-bind="calculateSum()"></span>

The first one uses the Expressions and second one uses the ng-bind directive.

Apply https on WCF service

In this article, we will try to learn how we can apply "https" on a WCF service. For understanding this, we will first create wcf service and host it on IIS using "http". Then we will try to convert it into "https" type. So let's start with it.

First we will create a newwcf service type project. We will remove the unwanted code and keep only single method, GetString method. So our service look like:

Next, let's host the service in IIS, on "http". So open IIS and create a new website. We name it as "TestService". 

Click "Ok" and it's done. Now we can browse the service on "http".

So it works fine, Now in order to configure it to be used on "https", we need to generate a self signed certificate. Remember that the self signed certificates are generated only for development purposes and they are NOT for production use. In order to generate the certificate, select the root node in IIS and select the "Server Certificates" option from the right panel. Check the screen-shot below:

Select the "Create Self-Signed Certificate" option in the extreme right panel. This will provide the option to generate the certificate for demonstration purposes. Provide a name for it. We will call it "TestWcfHttpsCertificate".

Click "Ok" and certificate is generated.

Now we need to attach this certificate to the service. For this, go to the hosted service and select the bindings option. Select "Add" binding option. This time we will select the "https" option and also select the "SSL Certificate" from the list of available ones. Here we will select the certificate which we generated above.

Click "Ok" we are done with it. We have the "https" binding configured for the service. Browse the service using https. At first, you will receive a page with a warning message, like below:

This is because, we have used a kind of temporary certificate. In order to view the service, click on "View Advanced" and select "Proceed" option and you can see the service.

That's it. we are done with it. You can view the service with the http binding as well. In order to avoid this, you can either remove the http binding or you can go to the website, select the "SSL Settings" option from the panel.

From their, select "Require SSL" option and click "Apply" from the right most panel.

Now restart the website try to browse the application using "http" and you will receive the error:

HTTP Error 403.4 - Forbidden

The page you are trying to access is secured with Secure Sockets Layer (SSL).

So that's it. we can now access the service only using the "https". Hope you enjoyed reading it. Happy hosting...!!!

Outer Apply in SQL Server

In one of our previous discussion, we discussed about the concept of Cross apply in sql. In this article we will discuss about the Outer apply. If you have not read that then I would suggest you to go through it here first, as we will use the same data & tables. So let's start with it.

So now we will add another category Category 3, in the Category table. But this will have no Product associated with it. So we will first use the Left Join and see the results we get.

Now on order to use the Outer apply, our query will remain the same as it was in previous article except the Cross keyword will be replaced with the Outer keyword. Let's change it and see the results.

Now, as we discussed earlier that Apply can be used with the Table Valued functions also, we will use the same function which we created earlier and simply call that function using the Outer apply So let's change the call to use Outer apply.

Easy to learn. Happy Querying...!!!

Cross Apply in SQL Server

Apply is one of the very useful feature in SQL server and it might be the case that you will realize that you could have used this in one of your requirements, while working on database, if it was not know till now. So let's discuss it. 

Apply keyword provides functionality similar to Join but they can be used in situation where it is not possible to use a Join. This keyword can be used in 2 ways:

• Cross Apply : This is similar to use of Inner Join.
• Outer Apply : This is similar to use of Left Outer Join

So let's start by creating two different tables named Category and Product and add some data. As from the name, Category will be a parent table and Product will be a child table. So our dummy data will look like the following:

Now let's come to the use of Cross Apply. As we discussed earlier, Cross apply can be used like an Inner join. So in order to get the data from both the tables, we can apply the Cross apply as:

Easy enough, quite similar to co-related sub-query, for each row of the Category table (outer query), each and every row of the Product table is evaluated (inner query) and if the result matches, the record is kept for the final result set. 

The point is that if we already have the Joins, than what is the use of apply. The Apply keyword is mainly intended to be used with Table Value Functions, where the outer query record set is from a table valued function. So let's move the outer query to create a table valued function:

Now, in order to use it, replace the inner query with the function call and see the results.

Great to work with. Happy Querying...!!!

GO keyword in SQL

While generating the SQL scripts, you might have often seen the GO keyword. What it is ? Let's see what exactly it is.

At first look, it might seem to be a keyword of T-SQL like any other keyword like SELECT, DISTINCT, ORDER BY etc. However, it is not. Yes, it is not a T-SQL keyword. As per MSDN, this keyword is:

GO is not a Transact-SQL statement; it is a command recognized by the sqlcmd and osql utilities and SQL Server Management Studio Code editor.

SQL Server utilities interpret GO as a signal that they should send the current batch of Transact-SQL statements to an instance of SQL Server. The current batch of statements is composed of all statements entered since the last GO, or since the start of the ad hoc session or script if this is the first GO.

This means, it is not considered as a T-SQL keyword and is more of a command to SQL Server. This keyword basically act as a command for SQL to execute a group or batch of statements which are written before the GO keyword is encountered. 

An important point to note here is that the GO keyword limits the scope of the variables to the batch of statements on which this command is used. This means if we try to use a declared variable after the GO keyword is executed, it will throw an error i.e. the keyword will not be available after it. See the following sample code:

Here, the (1 row(s) affected) message refers to the first SELECT statement which returns the value. However, the second SELECT returns error as the variable cannot be accessed after the GO command is executed.

Happy Querying...!!!

Generate UML Sequence diagram from Visual Studio

Yes it is correct, you can generate Sequence diagrams for your code, from within the Visual Studio and that too automatically.No need to create it your self. Let's see how we can do this.

Let's create a new sample project. Let's add a static classes Class1 and static method TestMethod1 in this class. Now let's create a test method on Default.aspx and call it on the Page_Load event. This function, in turn, will call TestMethod1 of Class1. So our code will look like the following:

Now, right click on the Page_Load event, and select the option "Generate Sequence Diagram". 

This will open up a window to define the settings to be used for generating this diagram. You can set what level of code it should consider for generating the diagram, whether to include the code within the entire solution or current project only etc.

Also, you can specify whether to save the diagram in current project or not. So we increase the call depth to 2 and keep rest of the settings as it is. 

Click "Ok" and it will generate the sequence diagram for the code we have.  

So the sequence diagram is ready. Just increase the "Maximum Call Depth" property and create the diagram to understand the code in easily. Happy Coding...!!!