What’s angularJS??

This post is the first in the series of learning and understanding the in and outs of angular js, comparison to other javascript frameworks. But for us to learn angular we need to know what is about and what problem it is trying to solve.

AngularJS is an open-source  framework, maintained by Google, that assists with running what are known as SPA . Its goal is to augment browser-based applications with MVC (Model View Controller) capability, in an effort to make both development and testing easier.

The definition from angular website is- Is a structural framework for building dynamic websites. By dynamic website, it means a website where the content is not fixed.  The content that is shown on page is based on the user selection and/or programmatically driven.

With angular,HTML is the templating language and enables you to extend HTML using directives.  Angular supports the following:

• Data binding as in {{}}.
• DOM control structures for repeating/hiding DOM fragments.
• Support for forms and form validation.
• Attaching code-behind to DOM elements.
• Grouping of HTML into reusable components

Out of box, angular provides all the functionality required to build simple CRUD application which include templating directives, data binding, form validation, routing and dependency injection.

It also good to mention that angular js is not meant for all applications. Angular was designed with CRUD applications which makes quite a good number of application running today. So lot of consideration has to be made as to when to use angular or other libraries like Jquery.

Just to point some of the feature that are provided by Angular JS,

Databinding: This feature enable an automatic update of the view whenever the model changes and vice versa. This two way data binding its most notable feature and reduces the amount of code written by releaving the server from templating responsibilities. The templates are rendered in plain HTML according to data contained in the scope

Controllers: By using controller you explicitly express yourself in a clean,readable and maintainable way without any boilerplate, registering callback or even watching model changes. Controller are the behavior behind the dom manipulation. This encourages bootstrapping and rapid prototyping of web applications.

Directives: They help extend HTML specific to your application needs. You also use directives to create reusable components that may involve hiding complex DOM structure,CSS and behaviour

Testability: It encourages behaviour view separation, coming with pre-bundled with mocks with lot of dependancy injection involving for managing dependancies.

Dependency Injection: Simply, this is a pattern which is often used in infrastructure components and which ensures that one particular component does not create references directly to other components. Instead of direct instantiation every component will references to required other components  as parameter to there constructor. With this, angular this allows us to do like so:

function userCtrl($scope)
{
  $scope.firstname="testing"
}

In this case we dont really care where the $scope is coming from. In future post we will look at the function of $scope.

AngularJs has some distinct compared to backbone  in terms of data binding,REST and templating which includes:

Whereas AngularJS supports two way binding, backbone relies heavily on boilerplate code to harmonize its models and views

Backbone communicates well with Restful backends, while angularJs’ $http service is more flexible connecting remote server either through a browser XMLHttpRequest object or via JSONP

In terms to templating, AngularJS users a combination of customizable HTML tags and expression while backbone.js uses different templating engines. e.g underscore.js