My Experience with AngularJS: A Sound Framework of JavaScript

AngularJS is a sound JavaScript framework, and it makes the job of the programmer really easy and helps the programmer deliver a good UI(User Interface) with a great UX(User Experience) in a short span of time. Some of the great features of angularJS are as follows-

1. It’s an MVC framework of JavaScript:

It separates the developments in 3 sections: Model, View and Controller.

Model: The collection of data. AngularJS provides a special variable called $scope which is used to make the data available to the view.

View: This is the html template. In view we use a concept called “data binding” which facilitates use of the the data(in the model, i.e. $scope).

Controller: This is where the business logic is kept that explains how the data needs to be handled

2. Data Binding:

This is the most frequently used feature of angularJS that reduces the programmers job of handling the the reflection of change of data in the view. Consider the following code snippet

HTML:

No of employees: <div>{{employees.length}}</div>

In this code we want to reflect in view as and when the count of employees change in the model. In case you had used JQuery to achieve the same you might have to do the DOM manipulation in your javascript code like as follows:

HTML:

<div id="emp_count"></div>

JavaScript:

$("#emp_count").html(employees.length);

and run this JS code as and when the employees count changes. So you need to keep track when this variable is changing which is a huge overhead. AngularJS even gives us a method called $watch which helps to keep track any change in the variable or object and handle the change in the $watch function block block

This examples shows you how simple it is with angularJS.

3. Directives:

You can define behaviour of a DOM element using directive. With its help you can define custom DOM elements, attributes for your project and define their behaviour in your angularJS code.

HTML:

<div>
     <ang-alert alert-text="clicked 1">click me</ang-alert>
     <ang-alert alert-text="clicked 2">click me</ang-alert>
</div>

JavaScript(AngularJS):

angular.module("myApp", []).
directive("angAlert", function () {
    return {
        restrict: 'E',
        link: function (scope, element, attributes) {
            //setting style
            $(element).css("display", "block");
            
            //defining event handler
            $(element).on("click", function () {
                alert(attributes.alertText);
            });
        }
    };
});

See demo here: http://jsfiddle.net/9tbeo0qt/

In this code ang-alert is a directive whose behaviour is defined completely in the javascript code. so HTML is kept clean of any event handler. and the html code itself is self-explanatory. This way the programmer can cocentrate on the module he is developing i.e. either the UI or the javascript and the final product is a clean code. Which is the best thing about angularJS.

Here comes the benefits of using AngularJS in you code:

  • Code becomes cleaner and maintainable: Its sound MVC framework governs you a good coding standard to follow throughout your code, which was not given by some other framework like Backbone.js.
  • Code becomes self-explanatory: Even a non-technical person can understand the high level logic by going through the code if written properly.
  • Increased Reusability of components: The directives provide you a  way to make reusable components without any alteration most of the time.
  • Unit testing becomes easy: If you use a Directives, many times in you application, a bug found in one section for the directive code, needs to be fixed only once, and the bug will be fixed in all the places wherever the directive is used
  • It provides the control for animation: Setting css animation rules on the classes that get applied on the DOM elements while transition happens for the rule set by the directives, you can achieve animation easily. For more check AngularJS animation documentation.

If this made you like angularJS, please read more on https://docs.angularjs.org/api. There are lot more in this magical framework.

Related:

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