AngularJS Introduction

Let’s learn AngularJS. This post provides basic Introduction of AngularJS and the motivation to use AngularJS in your projects.


What is AngularJS and Why at all?

It all started with JavaScript. Javascript is evolved from being just a scripting language used occasionally to perform client side validations to become a full-fledged programming language.

With Jquery, life gets way easier. It’s stable API tackles browser incompatibilities across tons of browser available around, and allows DOM manipulation on the fly.

But Jquery lacks something very important. It lacks structure, separation of concerns, testability, maintainability, and not so easy to understand. Notion of framework to develop modular applications upon seems missing. With ever increasing complexity, and sheer size of today’s applications, all jQuery projects looks completely different from one another as the developer himself tries to implement modularity and structure in his applications. Any new guy facing maintenance for those Jquery projects will have a hard time finding his way.

AngularJS was originated to fill this gap. AngularJS is a client side MVC framework, which provides a layer on top of jQuery. It provides a framework and api to develop modular applications upon, provides well defined structure to your applications, where separation of concerns is well maintained. Each functionality of project belongs to a specific concern(data, view, business-logic), and thus reduces development time by several fold, maintenance and testability becomes a breeze with modular architecture. In AngularJS, you can achieve the same functionality in couple of lines of code, which with JQuery might take hundreds of lines. AngularJS takes care of all boilerplate code, and let you focus on core business logic, and look-n-feel of your application.

AngularJS adheres MVC Pattern

AngularJS adheres a Model-View-Controller (MVC)-like pattern for structuring any application. There are three parts to any AngularJS application.

  • Model : Model is the data that you want to display to the user, or get the user to enter through your application. It is represented using JSON objects.
  • View : View is the User interface /rendered HTML that the user sees and interacts with, which displays the data to the user.
  • Controller : Controller handles the core business logic of your application. It decides which part of the model to show to the user, how to handle validation, perform business logic and so on.

AngularJS Advantages

  • Seperation Of Concerns (MVC)
  • Fewer lines of Code
  • Pure HTML templates
  • Testability
  • Smooth Integration with 3rd party libraries