JavaScript
Article

Why I Love AngularJS and You Should Too

By Sandeep Panda

AngularJS is a JavaScript framework by Google which aims to simplify front end app development. If you are into developing Single Page Apps, I’m sure you’ve heard of it. I am a big fan of AngularJS (I even wrote a book about it!) and in this article I am going to outline five of the reasons why I love it so much.

#1 Gives Structure to Your App

Normally, when we write JavaScript there is no well defined structure. While this can work for small apps, this is clearly not suitable for large scale apps. With AngularJS you can structure your source code by following either the MVC (Model-View-Controller) or MVVM (Model-View-Viewmodel) pattern. AngularJS is a MVW framework where W stands for Whatever works for you. You can organize your code into modules, which dramatically improves the testability and maintainability of your app.

#2 Two-way Data Binding

Data binding is certainly one the best features in AngularJS. You can declaratively bind your models to HTML elements. When the models change, the view is automatically updated and vice versa. This hugely reduces the amount of boilerplate code traditionally written to keep the model and view in sync.

#3 Directives

AngularJS Directives let you teach HTML new syntax. You can create reusable custom components with the directive API. For example, if you want a custom date picker widget you can create a <data-picker/> component. If you want a fancy file uploader with progress indicator you can go ahead and create a <file-upload/> component. Cool, isn’t it?

#4 Templating with HTML

AngularJS uses HTML for templating. This keeps things simple and allows designers and developers to work simultaneously. Designers can create UIs in the usual way and developers can use declarative binding syntax to tie different UI components with data models very easily.

#5 Embeddable, Injectable, and Testable

The best thing about AngularJS is that it’s a good team player. It never requires full commitment. As the AngularJS official website says, you can use as much or as little of AngularJS in your project as you need. If you need only two way data binding, you can include Angular and just use this feature.

AngularJS supports Dependency Injection out of the box. If you need something, you just ask Angular to inject it for you. It’s that simple. This hugely improves testability, as you can easily mock the components during testing.

AngularJS was created with testability in mind. The modules and Dependency Injection system make unit testing way easier. Furthermore, AngularJS offers a tool called Protractor which makes End-to-End testing a breeze. So, the code you develop is always testable and maintainable.

That’s not all! AngularJS also offers many more useful features like routing, filters, and animations that make AngularJS one of a kind. But the above points were more than enough for me to fall in love with it.

Do you want to learn AngularJS? Learnable recently published my book, AngularJS : Novice to Ninja which gets you up to speed with AngularJS. We’ll even cover the advanced concepts by building a Single Page Blogging app.

  • Eddy sapata

    great article!! :) :)
    anywayz Congrates for your book!!! :)
    angularjs:novice to ninja!! :) :)
    i will be so glad if we can meet!!! :) :)
    thanks!!! :) I am in pune!! :)

  • Alexander Semenov

    Angular does not leverage your programming skills. It’s not for programmers, like @annotation-style Java frameworks. That’s why programmers don’t like it, but others do. What’s for programmers? Unfortunately I can only name one thing related to web UI – Facebook React.

    • An0nym0usC0ward

      Try qooxdoo. Then we’ll talk :-) It may not be very popular, but it surely is built by and for programmers.

  • http://www.brettwidmann.com Brett Widmann

    Looks like I have a new book I need to pick up for reading. Love me some AngularJS. Good to see even more literature coming out for it. Great article highlighting the big selling points of AngularJS, too. Awesome!

  • jokeyrhyme
  • AHSR0x

    great explain

  • http://ericnjanga.com Eric Njanga

    Great article Sandeep. Do you think the use of Protractor eliminate the need of testing frameworks like “Jasmine” or “Mocha”?
    Thank you.

    • http://gadgeticworld.com/ Sandeep Panda

      Hi Eric.. Protractor is a framework for end-to-end tests. For unit tests you still need Mocha or Jasmine.

  • http://phatsonic.de b_i_d

    The first one doesn’t make sense. What’s stopping you from using MVW and modules outside of Angular? Since Angular doesn’t force you, using or not using this is just as much your choice as it is without Angular.

  • Jingqi Xie

    Consider ASP.NET Web Forms. They are no longer popular, and the asp-prefixed tags are replaced by direct HTML templates in ASP.NET MVC. Then consider again Angular directives.

  • An0nym0usC0ward

    When you do web sites, you want to work with the raw html and css – that’s the bread and butter of most web developers, and rightly so. When you do single page apps, you want a rich lib of readymade UI components – like a GTK+ or Qt for the browser, since without it building a rich UI means a lot more effort, which you don’t get to spend on the app’s logic. I don’t think there’s much space in between those two categories – whatever is on the web, it usually falls in one of these categories (with some systems consisting of multiple lightly coupled components in both categories).

    Angular doesn’t come handy in either case. Sure, you absolutely can use it to build dynamic web sites, but it’s so big and heavy that the overhead, both for development and at runtime, simply isn’t justified. And you can also use it to build single page apps with a complex UI, with tons of dialogs, a multi-document interface, draggable form elements etc. – but it doesn’t provide any support at all for building such an UI. It just imposes its own notion of MVW, making it less than optimal to integrate other opinionated libraries, which would solve your UI problem.

    In particular, the UI is where you feel the differences between browsers most painful. Angular doesn’t help you there at all. AngularUI is at best a toy, not at all a comprehensive, feature-rich and well supported UI library. My focus is in heavy single page apps which run in multiple browsers. Why would I use a tool that mostly doesn’t solve any of my problems, and sometimes just just gets in the way (by being a very opinionated framework)?

  • sandeep

    I want to add JQuery datatable plugin to my angularJS application …. pls provide some sample code…..

    • stillnotsureaboutNG

      yourModule.directive(‘dataTable’, function() {
      return {
      restrict: ‘A’,
      link: function(scope, element){
      element.datatable();
      }
      }
      });

  • Varinder

    Its really nice article.

  • Amrit Mishra

    Its been more than a year now, I am working with Angular. it is good and helps a lot, but there are many loop holes which makes it not perfect. There are many issues which causes a developer to look for solutions, but the developer community and the way is developed is awesome, you can get lots of tutorial, links, documentation also it is easy to combine with Ionic and Phonegap as well.

  • http://ingvijonasson.com/ Ingvi Jónasson

    Can someone explain the benefits of creating directories such as a element. Is it code readability and wouldn’t it cause problems when validating the markup?

  • http://www.agriya.com/services/yii-development jennifermorrison

    Your article is good! I am loving it angularjs applications. Really i am
    proud to say that as i am an angularjs developer.Because its having good
    Advantages. Recently I studied this article. some advantages of being
    angularjs developer. http://www.articlesbase.com/programming-articles/advantages-of-being-an-angularjs-developer-7279884.html

    • mbokil

      I am proud to say it too. It can take a while to understand modules, directives, factories, UI router, etc. but once you have it down you can crank out top quality apps that are lightweight and fast responding. There is also a good market for the work too which is helpful to pay the bills.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.