AngularJS way of thinking

Lately, I am dabbling in angular, and teaching myself a new way of thinking, AngularJS way of thinking.

As Wikipedia defines, AngularJS is built around the belief that declarative programming (HTML) should be used for building UIs and wiring software components, while imperative programming (JavaScript) is excellent for expressing business logic. The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS deemphasizes DOM manipulation and improves testability.

Angular, truly helps decouple DOM manipulation from application logic. This improves the testability of code and separating View from controller helps two different people UI Artist and Controller developer can work in parallel.

So, here is a small example to explain the separation of View and controller. I am filling a combo box, with kid name and I need to get the selected combo box value. First, I took the old regular route of JQuery and HTML as such.

HTML code:

<label>
  Set reward for :
      <select id="kidslist" class="input-medium">
         <option ng-repeat="kid in kids">{{kid.name}}</option>
      </select>
</label>

Above code, is just using a ‘kids’ array and using ‘ng-repeat’ and ‘{{}}’ angular special commands for filling the combo box.

Below is my Angular code in JQuery’ish way, ignore ‘$scope’, it is a special angular variable which ties view and controller thru Angular.

function rewards_controller($scope) {
   $scope.kids = [{ "name": "Azan" }, { "name": "Aman" }];
   $scope.GetSelectedKid= function () {
     alert($("#kidslist").val());
   }
}

The above code has a problem that controller is referring a UI element (#kidslist). This is not a clean separation of View and Controller. This code is difficult to test, as you need a View also with it to test the controller logic.

This is the place where AngularJS shines, it helps you separate applications into distinct presentation, data, and logic components and encourage loose coupling between these components.

And here is the right way to do this in Angular is as follows:
HTML code:

 
<label>
 Set reward for:
    <select class="input-medium" ng-model="selectedkid" 
          ng-options="kid.name for kid in kids " />
 </label>

Notice the ng-model in above code, this is an angular extension which is connecting a model’s variable ‘selectedkid’ with view. Behind the scene, angular magic fills ‘selectedkid’ with the combo box selection.
Now, in your controller code, you are not referring any UI element but referring a variable, which makes it easy to test contoller. Notice, in below code there is no reference anywhere of any UI element. This is clean separation of view and controller.

Angular Code:

 
function rewards_controller($scope) {

      $scope.kids = [{ "name": "Azan" }, { "name": "Aman" }];
      $scope.selectedkid = $scope.kids[0]; //initialized it
      $scope.GetSelectedKid= function () {
         alert($scope.selectedkid.name); //angular will do the magic for you.
     }
}

Calling GetSelectedKid any where in your controller will give you the selected kid name in combo box.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s