Introduction to AngularJS

Reading Time: 2 minutes

AngularJS is a superheroic JavaScript MVC framework for the Web. We call it super‐ heroic because AngularJS does so much for us that we only have to focus on our core application and let AngularJS take care of everything else. It allows us to apply standard, tried-and-tested software engineering practices traditionally used on the server side in client-side programming to accelerate frontend development. It provides a consistent scalable structure that makes it a breeze to develop large, complex applications as part of a team.

And the best part? It’s all done in pure JavaScript and HTML. No need to learn another new programming or templating language (though you do have to understand the MVC and MVVM paradigms of developing applications, which we briefly cover later in this blog). And how does it fulfill all these crazy and wonderful, seemingly impossible-to-satisfy promises?

The AngularJS philosophy is driven by a few key tenets that drive everything from how to structure your application, to how your applications should be hooked together, to how to test your application and integrate your code with other libraries. But before we get into each of these, let’s take a look at why we should even care in the first place.

What Is MVC (Model-View-Controller)?
The core concept behind the AngularJS framework is the MVC architectural pattern. The Model-View-Controller pattern (or MVVM, which stands for Model-ViewViewModel, which is quite similar) evolved as a way to separate logical units and concerns when developing large applications. It gives developers a starting point in deciding how and where to split responsibilities. The MVC architectural pattern divides an application into three distinct, modular parts:

  • The model is the driving force of the application. This is generally the data behind the application, usually fetched from the server. Any UI with data that the user sees is derived from the model, or a subset of the model.
  • The view is the UI that the user sees and interacts with. It is dynamic, and generated based on the current model of the application.
  • The controller is the business logic and presentation layer, which peforms actions such as fetching data, and makes decisions such as how to present the model, which parts of it to display, etc.

Because the controller is responsible for basically deciding which parts of the model to display in the view, depending on the implementation, it can also be thought of as a viewmodel, or a presenter.
At its core, though, each of these patterns splits responsibilities in the application into separate subunits, which offers the following benefits:

  • Each unit is responsible for one and only one thing. The model is the data, the view is the UI, and the controller is the business logic. Figuring out where the new code we are working on belongs, as well as finding prior code, is easy because of this single responsibility principle.
  • Each unit is as independent from the others as possible. This makes the code much more modular and reusable, as well as easy to maintain.

My next post on Data Driven Approach in AngularJS is here


Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *