The Benefits of Angular

DZone 's Guide to

The Benefits of Angular

John Basso provides a quick summary of the benefits of using AngularJS.

· Web Dev Zone ·
Free Resource

Angular is a very robust, popular web framework primarily used to build single page applications (SPAs). As the web technologies available to developers continue to become more sophisticated, so do users’ expectations of their software. Many users who were previously all too familiar with full page-reloads, post-backs, and less than seamless transitions in their workflows now expect these "problems" to be solved. This is where Angular can alleviate developers’ pain of such requests and make satisfying them a reality. At the end of the day we want satisfied customers, right? Of course, we do!

Why Is Angular So Powerful?

Angular – first developed by Misko Hevery at Google – was created to solve a number of problems. Among the core of its features are model-binding, dependency injection, routing, and the ability to create custom reusable components (formally known as 'directives'). Angular is based on an MVC model. Templates are structured using HTML and styled with CSS. Controllers are used to augment a $scope object which acts as the binding context for the template. At runtime, the Angular framework will marry the template and $scope together, forming a view. The controller can call into services, which are created and defined to encapsulate the business logic of your application.

Clearly this strong separation of concerns helps increase cohesion between components, thus promoting code reuse, testability, and helping teams work in parallel (i.e. one developer can work on the service layer while a creative developer can focus on styling and structuring the page).

Directives are a way for us to write our HTML markup as though we are speaking in a domain specific language. In other words, we can focus on writing our code declaratively instead of imperatively. For example, if we have a page and want to display a person’s address, we can simply write a directive to encapsulate the HTML markup and its behavior. The directive can then be used on subsequent pages as though it is our own custom HTML element (ex: <address person=’vm.person’ />).

First, we have a component that can be re-used anytime we want to display a person’s address. We don’t need to re-write this component, and it is consistent across our pages. Second, developers can read the HTML page and understand the intent behind it rather than all of the nitty-gritty markup details.

When Should You Choose Angular?

Angular is certainly not for everyone and every project. The library is fairly large given its vast set of rich features. While it is not difficult to grasp the basics of Angular and get started on a project, there is a significant learning curve to becoming familiar with the more advanced concepts such as writing custom directives. It may also be overkill when all you need is simple model-binding on a page. However, in the case where a large framework may be necessary to satisfy a project’s technical requirements, the learning curve is a small price to pay for the benefits you will receive.

If you find yourself amidst a complex web project that requires business-logic on the front-end, a lot of asynchronous network calls, and a seamless look and feel as it relates to the user experience, Angular is a prime candidate. Through its many desirable features and overall architecture, it is likely to help you create a product that has a positive user experience, is reliable, testable, and maintainable throughout the software development life-cycle.

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.   

angular, angular js, web design and web development, web dev, web developement

Published at DZone with permission of John Basso , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}