ng-repeat in Angularjs

It is quite common to display records in grid format in applications. In this article, we will discuss how we can do this in angular js.

Angular js uses the concept of directives(which extends the html attributes), to bind data to records which can be displayed in html controls. In this discussion, we will see how we can use the ng-repeat directive in angular js to display data in grid format.

To start with, we will create a angular controller and add some data in an array. So our code will look like the following:

var app = angular.module("myApp", []);  
        app.controller('ngRepeatExampleController', function ($scope, $http) {  
  
            $scope.Users = [];  
  
            $scope.Users.push({ UserId: 1, UserName: 'User X' });  
            $scope.Users.push({ UserId: 2, UserName: 'User Y' });  
            $scope.Users.push({ UserId: 3, UserName: 'User Z' });  
  
        });  

Next step is to bind the controller we created, with a parent div in html. For this we use ng-controller directive. To bind the data in the table format from the array, we will apply the ng-repeater element at the table row level. It will be simply how we use the foreach loop in C#. The difference is that we do not have an intellisense help here. So our code will look like the following:

 <div ng-app="myApp" data-ng-controller="ngRepeatExampleController">  
       <table border="1" style="width: 200px">  
           <thead>  
               <th>User Id</th>  
               <th>User Name</th>   
           </thead>  
           <tr data-ng-repeat="User in Users">  
               <td>{{ User.UserId }}</td>  
               <td>{{ User.UserName }}</td>   
           </tr>  
       </table>   
   </div>  

Run the application and we can see the data getting displayed in grid format.

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

HTTP could not register URL http Your process does not have access rights to this namespace

While self-hosting the wcf service in console application, you may face the following issue:

HTTP could not register URL http://+:54663/MyService/. Your process does not have access rights to this namespace (see http://go.microsoft.com/fwlink/?LinkId=70353 for details).

Simply restart the Visual Studio using the Administrator permissions and you are done.

Simple example to illustrate the controllers in Angular-js

Controllers are one of the very elegant way to communicate/pass data to the view. Simply create functions and properties in javascript, write the business logic and use the angular js directives and we are done. For this purpose, it uses $scope, which basically acts as a carrier of data between the controller and the view.

So let's create a sample calculator application, to illustrate how we can use the controllers in angular js. For this, add a javascript file and declare a controller with the following syntax:

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

mainApp.controller('calculatorController', function ($scope) {
 
    }
});

Here, the mainApp is the application level angular module and in this module we add or register a controller named calculatorController. The controller function accepts two parameters, where first one is the name of the controller and second represents the controller itself, with functions and properties we will use.

Within this controller, we will create the required properties and functions we need. We add two properties named firstNumber and secondNumber and a function to perform their sum using function named calculateSum. This is done through the use of $scope variable.So the controller will look like:

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

mainApp.controller('calculatorController', function ($scope) {

    $scope.firstNumber = 1;
    $scope.secondNumber = 2;

    $scope.calculateSum = function () {
        return $scope.firstNumber + $scope.secondNumber;
    }
});

Next, we simply need to bind this controller to the view. For this, we add an html page and add the reference to the external angular js using external reference. Also add reference to the external controller js file we created.

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js 

Further, we add a div and two textboxes inside it. We bind the controller to the div using the ng-controller directive, using following syntax:

<div ng-app="mainApp" ng-controller="calculatorController">
</div>

We bind the model properties i.e. firstNumber and secondNumber using the ng-model directive. So our textboxes will look like the following:

<input type="text" ng-model="firstNumber">
<input type="text" ng-model="secondNumber">

We display the sum of these two numbers in a span, by binding the calculateSum using the angular expressions syntax. Since the angular js support two way data-binding, through ng-model, when we change the values in the textboxes, the updated values get reflected in the span tag. So the span tag will look like the following:

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

So our complete html form will look like:

Run the application and change the values and see the results.

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

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