What is Angular?

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 a 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 helps 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 any time 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.