Categories: angularjs

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
Share
Published by

Recent Posts

Spring Boot + AngularJS + Spring Data + JPA CRUD App Example

In this post we will be developing a full-blown CRUD application using Spring Boot, AngularJS, Spring Data, JPA/Hibernate and MySQL,…

7 years ago

Spring Boot Rest API Example

Spring Boot complements Spring REST support by providing default dependencies/converters out of the box. Writing RESTful services in Spring Boot…

7 years ago

Spring Boot WAR deployment example

Being able to start the application as standalone jar is great, but sometimes it might not be possible to run…

7 years ago

Spring Boot Introduction + hello world example

Spring framework has taken the software development industry by storm. Dependency Injection, rock solid MVC framework, Transaction management, messaging support,…

7 years ago

Secure Spring REST API using OAuth2

Let's secure our Spring REST API using OAuth2 this time, a simple guide showing what is required to secure a…

8 years ago

AngularJS+Spring Security using Basic Authentication

This post shows how an AngularJS application can consume a REST API which is secured with Basic authentication using Spring…

8 years ago