1. Single page web applications made easy
HTML is great for creating static websites, but not much use for developing a dynamic web application which can react instantly to changes made by a user. In theory, those changes can be made on the server side. However, in this case, an entirely new web page must be rendered again and again.
Alternatively, changes can be made on the client (browser) side. In this case, core HTML code, JavaScript and CSS can be downloaded when the browser is first to run, all other resources are downloaded as required, and everything is run entirely on the user’s on hardware, making calls to the backend as necessary. And this kind of architecture is designed to scale from a handful of users to millions of users with relative ease. In this way, you can now think of your web application as a kind of thin client.
Obviously, you need a client-side JavaScript framework to help to manage that complexity by separating concerns properly on multiple levels. What’s more, by solving most problems relating to code structure and code maintenance by using a framework, this gives more time and space to focus on developing the interactive elements of your user interface. And that’s exactly why Google designed AngularJS in the first place.
2. AngularJS is your best friend
Other frameworks deal with HTML’s shortcomings by either somehow abstracting away from HTML, CSS, and JavaScript, or by providing an imperative way of manipulating the DOM. Neither of these approaches addresses the root problem, which is that HTML was simply not designed for dynamic views.
AngularJS is a comprehensive JavaScript framework which makes it quick and easy to create professional single-page dynamic web applications, such as Gmail. This is because Angular makes it possible for you to „teach” HTML new tricks and behaviors by adding powerful functionalities such as client-side templates, dependency injection, and data binding (which is automatically available in Angular 1 or something you can set up manually in Angular 2).
3. Why do we love AngularJS?
As you’d expect, Angular completely embraces the MVW paradigm, so that developers can build applications that have a clear separation between their functional layers. This greatly simplifies and speeds up development, and also builds in maximum flexibility for any future changes.
Next up: Angular was designed from the start with Test Driven Development (TDD) in mind. The framework, therefore, makes it simple to write the right kind of unit and End-to-End tests. What’s more, Angular’s out-of-the-box support for TDD scales well, so there are no more flaky test runs just because your web application has grown to be bigger than a toy. And, yes, the most popular tools for testing in Angular (Karma and Protractor) both integrate well with CI build tools.
4. Why exactly is AngularJS so powerful?
Modular
Angular lets developers organize code into modules, which helps to keep development fast, but also maintainable – long gone are the days of trying to understand confusing reams of jQuery spaghetti code.
Other frameworks dictate how to folder structures and models, but Angular gives us the flexibility to organize the structure as we wish.
Unfortunately, JavaScript makes it very easy to litter variables across an application, potentially trampling all over other areas and third-party bits of code. Thankfully, Angular makes it simple to keep variables away from each other by providing an explicit scope mechanism for managing which parts of your application have access to what.
Angular’s Dependency Injection allows us to write code that depends on interfaces (by passing them as functions or classes) rather than using hardcoded dependencies. This makes it possible to set up libraries of services or providers, and then intuitively use these whenever and wherever needed in our applications. If we forget to pass in a dependency, but then reference it, that Service will be undefined, which will result in a runtime error inside Angular. Fortunately, Angular throws its own errors and makes them very easy to debug.
Reuse
Just as important as promoting a modular approach, Angular also lets us reuse code in a number of powerful ways.
With Angular’s HTML compiler, we can manipulate the DOM by expanding what tags and attributes can do. This is done by using directives, which make it possible to package up reusable chunks of DOM-based code and initialize them directly within HTML templates using data attributes and our custom elements like, for example, which adds a date picker widget. In addition, Angular comes with many directives built in, including the ng-click directive that binds click events to a method within that element’s scope (unlike JavaScript’s on click event which is available only globally). Another directive, ng-repeat, loops through an array in your model, duplicating the template it's attached to, in order to fill in the relevant data for each item. This approach gives clearer page semantics without overloading pages with heaps of div tags and also removes the need to create tons of unnecessary CSS classes to define the properties of each particular object.
Angular also provides a mechanism for creating libraries and reusable classes that can be used by both controllers and directives. In Angular, these are called services. And, luckily, Angular is packed with a huge collection of core services, such as $http (related to AJAX), $resource (for accessing REST-based resources), and $location (routing for multiple views).
Speeds up development
Two-way data binding is probably the most magical and the most useful feature in Angular 1. Put simply, data binding guarantees automatic synchronization of data between your view (HTML) and the model (JavaScript variables). So, whenever a value changes in the model, the view is automatically updated; and whenever the value of any view component changes, the model is also updated. This saves writing tons of boilerplate code and DOM manipulations just to get started on a project.
Twitter and the Chrome application store both make the user feel as if they are interacting with a desktop application, but in fact, these are single page applications with multiple views - the required content is loaded on the main page when a specific URL is requested. Angular’s ng-view directive makes it easy to implement the loading of multiple views into the DOM as a user navigates an application. Routing also makes an application easier to maintain as, once again, we’re dividing our application into different, logical parts.
Providing feedback to a user while filling in a form is a great way to give a positive user experience. With that in mind, Angular’s forms incorporate real-time form validations, custom validators, and format. Angular also offers several CSS classes that indicate whether form controls are (or are not) in a certain state, which is useful for quickly customizing the look and feel of form controls, depending on their state.
Unlike other frameworks, with Angular, there’s no need to inherit from proprietary types in order to wrap the data model in accessor methods. Angular data models are standard JavaScript objects, which makes code easy to test, maintain, reuse and, again, free from boilerplate. In fact, many libraries provide extremely powerful collection functions that “just work” with Angular models.
It’s now standard to rely on REST-based communications between a server and client. In this way, a single line of JavaScript code can quickly contact the server and fetch the data which is required to interact with web pages. Angular then turns this into a simple JavaScript object.
Localization is an important part of any serious application. And Angular’s local-aware filters and stemming directives provide the ideal building blocks for making an application available in all locales.
Facilitates cooperation
Last, but not least, Angular uses plain HTML as the templating language, which makes the workflow between designers and developers run as smoothly as possible. In this way, designers can create the UI in their usual way; in the meantime, developers can use a declarative binding syntax to easily bind different UI components with data models by using an expression, for example, {{ name}}, which would display a name model in HTML.
