.netfreak: March 2016

Friday, March 25, 2016

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...!!!

Saturday, March 19, 2016

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.

Saturday, March 5, 2016

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...!!!