The Angular Way
Understanding Fundamentals and Concepts of
What is Angular?
AngularJS is an open-source Javascript MVC framework for creating single-page applications. AngularJS is maintained by Google and was slotted as an official feature at Google I/O conference 2013.
Unlike many other Javascript application frameworks, Angular is a highly opinionated and fully featured client side framework and is not a bundling of existing tools such as jQuery or Underscore. It has zero dependencies.
AngularJS was developed originally in 2009 and has had regular releases from 2010 to today's stable release of 1.0.8. The Angular team not only consists of numerous community supporters but dedicated engineers from Google.
Angular Philosophy
The nature of AngularJS is quite opinionated. The philosophy is centered around the belief that declarative programming should be used for designing UI and software components while imperative programming is best for expressing business logic. Angular adapts and extends real HTML to better serve dynamic content through two-way data-binding that allows for automatic synchronization of models and views, deemphasizing DOM manipulation and improving testability.
<input type="text" ng-model="user.email" /><p><strong>E-mail:</strong> {{user.email}}</p>
Angular Design Goals
By following the MVC pattern of software engineering, encouraging loose coupling between presentation, data, and logic components, and enforcing dependency injection, Angular achieves the following design goals:
Why Angular?
MVC Done Right
Most frameworks implement MVC by asking you to split your app into components, then require you to write code to string them up together again.
Angular implements MVC by asking you to split your app into components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connects them.
Because Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier.
Why angular?
A Declaritive User Interface
Angular uses HTML to define a user interface. HTML is a declarative language which is more intuitive and less convoluted than defining the interface in JS. HTML is less difficult to reorganize resulting in UI that is less likely to break. You can also involve more UI developers when your view is written with HTML. In Angular HTML determines the execution order. By using special attributes in the element, you define what gets loaded and not how.
Spend less time determining the flow and order of loading in your application. Simply define what you want to use and Angular will take care of your dependencies.
Why Angular?
POJO Data Models
In Angular data models are plain old JavaScript objects (POJO) and don't require extraneous getter and setter functions. You can change properties of objects and arrays at will. Giving you complete freedom to extend or enhance your data models according to business needs.
All data is bound to the view from the controller using something called "scopes". These scopes are quietly watched by Angular for changes and updates the view accordingly. No need for tinkering with events to do this.
WHY ANGULAR?
Flexible Filters
Angular's filters can change or manipulate data before it reaches the view while preserving the original data in your models. It can involve anything as simple as formatting decimals on a number, reversing the order of an array, filtering an array or implementing pagination. Like directives filters are standalone and can be reused in any app. Need a datagrid? You can write a complete sortable data table using only filters and no javascript at all.
Enter number: <input type="text" ng-model="val" /><br>No decimal places: {{ val | number:0 }}<br>4 decimal places: {{ val | number:4 }}
WHY ANGULAR?
DOM Manipulation Where It Belongs
In Angular DOM manipulation is inside a directive and not the view.
app.directive("HoverEffect", function() {return function(scope, element, attrs) {element.bind("mouseenter", function() {element.css("background", "yellow");});element.bind("mouseleave", function() {element.css("background", "none");}}
});
<span hover-effect>Roll over me!</span>
WHY ANGULAR?
Services Where They Belong
By definition of MVC, a controller instantiates Models to the view and passes changes to that data back to the Model to be persisted to data storage . In Angular the controller is not an object nor does it inherit anything. It simply implements services.
Services do not get involved with your MVC, they are designed to be reusable and standalone providers that expose external or internal resources such as API's or datastores. They are not required at all but are recommended to take the heavy lifting that you would otherwise place in your controller which is bad practice across the board.
WHY ANGULAR?
Context aware communication
Angular has a built in PubSub system that is very robust and empowers the developers to do great things without writing it from scratch. Using broadcast() you can send a message to all children controllers. With emit() a message is sent to all of its ancestors.
In fact, if you are just telling other controllers to update their views based on changes in different regions of your application, data-binding will do this automatically.
WHY ANGULAR?
Testability at its finest
One of Angular's shining attributes is the fact that it's architected around the importance of testability. The framework relies on dependency injection and implements inversion of control which are popular methodologies for building modern enterprise applications. Because all controllers or modules require DI to pass information, Angular can inject mock data in your actual components to measure output and behavior. For example Angular has a mock http provider to inject fake server responses into your components.
WHY ANGULAR?
Future Proofing
Angular 1.2 is fast approaching, which addresses many performance and flexibility concerns. The "bloated" features have been modularized to use at will components.
-
ngMobile module provides touch and swipe support for mobile devices
- Enterprise level security is enhanced with many features to protect the state of your application and data.
- A large enhancement to documentation including a version specific api, best practices, testing and more.
- Protractor: an E2E testing framework built on top of WebDriverJS
- Enhanced error reporting/logging
Who uses ANGULAR?
Google's Doubleclick for advertisors
Youtube's Leanback Service and App for PlayStation 3
Ebay's Commerce Network
Everymote
Plunker JS/CSS/HTML Playground
Localytics
and many more...
Backbone vs ANGULAR
- Backbone is a library or metaframework. Angular is a full-featured SPA framework
- Angular supports nested models - Backbone does not out of the box
- Backbone gives you an extendable model boilerplate. Angular uses POJO models.
- Backbone models support restful responses out of the box. Angular supports any http response.
- Angular uses HTML as a templating engine. Backbone leaves this choice up to you.
- Backbone is opinionated at its core. Angular is opinionated at its core. They both enforce standards in order to work.
Resources
Articles
Demystifying the myths - Backbone vs Angular
Experiences with Backbone and why we are moving to Angular
LEARNING
The Angular way
By tcresine
