20

From the basic Angular tutorial, it seems like all it does is fetch some JSON from an API and display it. Also, there's its double binding magic.

But why would I use it instead of a backend solution (like Rails) that builds the view in the backend and serves it to the user, with everything in place already? What are the use cases?

gberger
  • 327

3 Answers3

26

TLDR;

Angular helps you deal with the complexity inherent in rich user interfaces. As UI complexity increases, the traditional model of generating pages on the server gets much more complex. Angular lets you decompose your UI into manageable chunks, and allows you to separate the UI from the implementation. This makes server-side page generation a great deal easier, but Angular really comes into its own when you make the move to pure javascript-based applications. A good example of such an application is Trello.

The long story

Angular isn't really targeted at sites that you can comfortably implement by generating everything on the server, and sending it across. Furthermore, whilst that is a perfectly good approach that works for many sites and applications around the internet, it becomes increasingly complex (thus difficult) to keep that approach working as you try to increase the level of interactivity in your site.

Ultimately the way you solve this is by pushing your UI more and more into the Javascript side of the equation. Angular lets you break your UI up into components, giving you clear separation between the look-and-feel, and the how-it-works. You can then build fairly simple pages on the server, and the JS front end is used to create a rich UI that makes separate calls back to your server for the data they need.

There comes a point, though, where all you want to do is server a stub page that loads a completely javascript-based application. Probably the most well known example of the sort of use-case where Angular really shines is Trello (it uses Backbone, not Angular, but it is the same use-case). There is a site http://builtwith.angularjs.org/ which has more example sites that use Angular.

So the short answer? Angular makes it easier to create rich, highly interactive user interfaces by letting you decompose your UI into components, and ultimately go completely javascript.

random-forest-cat
  • 133
guysherman
  • 669
  • 3
    AngularJ sodesn't provide clear separation of look and feel and logic. – rsman May 10 '13 at 02:11
  • 13
    @rsman, it clearly does. The whole point of the data-binding is that you don't write a whole bunch of DOM-manipulation code, angular does it for you, ergo, you define what it looks like, you define how your interactions etc work, but you avoid having to couple those two together with code that updates what it looks like from code that handles interactions. – guysherman May 10 '13 at 02:44
  • 3
    Trello, used in the example does not use Angular http://blog.fogcreek.com/the-trello-tech-stack – JAMESSTONEco Jan 29 '14 at 20:15
  • 1
    @jamesstoneco indeed, it does not, I simply used Trello as an example of a purely client-side JS application. It was one of the earliest to do it well. – guysherman Aug 27 '15 at 19:18
7

It is about making more responsive user interfaces. The double binding, dependency injection and so on makes it possible to create dynamic pages quite easily. You can write directives in Angular which gives you a declarative way to construct a view.

As an example, in a current project we have a view that uses several hundred lines of JavaScript code in order to make a responsive user experience. Even so the page is a bit buggy and very difficult to maintain. We started looking around for a better option and looked at backbone.js and knockout.js. Eventually we tried Angular. We were able to create a much more responsive and maintainable page with just a few lines of code. Gone was all the DOM manipulation code. Gone was all the clunky backend view creations that had to be fetched and inserted at the right places. Gone was all the code that was written to keep the model and the view in sync. With that experience the decision to move to Angular became easier and so far we have not regretted it.

Vincent Ramdhanie
  • 704
  • "Gone was all the DOM manipulation code." This is the most important thing in my opinion. – Bent Jan 29 '19 at 17:13
5

Angular is for developing Single Page Applications, it helps with providing a solid skeleton for your app. It is also good with forms, not so good with complex crowded UIs with lots of data. Two-way data binding is "magic" at first but you have to be aware that most recent frameworks (including Angular 2 itself) move away from two-way data binding for a more simple Data flow down / event flow up approach (telling that story would be too long here).

I also have to warn you that Angular doesn't have a definite way of doing things and sometimes offers too many ways to skin a cat, which can make the learning curve steeper. Also if you want to scale an Angular app, you'll have to understand its internal mechanics and possible impact on performance. Once you do that, and once you establish consistent solid design patterns, the sky is the limit. But you need to dedicate time to it.

That said, your question seems to be more about what are the use cases of SPAs rather than Angular itself.

The use cases of Single Page Applications are for having web apps with robust UI/UX and overall better application feel. By not having to reload your page you save on rendering time and bandwidth. You also separate data and presentation which is awesome. Your application becomes:

  • Static files, including your index.html
  • A REST API serving data
  • A data-driven front-end application
Thomas Roch
  • 396