Features

Designed & developed by Google!
Extends HTML vocabulary.
Allows creating re-usable custom components via Directives/Templates.
Model-View-* (Model View Whatever) framework.
Modular code & allows dependency injection.
Dynamic routing, partial views and re-usable services ($http, $resource).
Companion UI Library Angular UI available.
Companion Animation Framework ng-animate available.

Pros

Exceedingly fast data binding.
Learning Curve - Easy
Works with Phone Gap - (see additional links below)
Decent debugging tool - Angular Batarang for Chrome.

When to use Angular?

Application has lots of UI elements.
Need for creating re-usable web components.
For Extending HTML vocabulary.
Building structured application code.
While using Agile methodology - with frequent view changes.

Samples


					
						Enter First Name
					
						

						Enter Last Name

						

						
						You entered {{Person.firstName}} {{Person.lastName}}. Is that correct?

Example 1: Two way data binding

Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Example 2: Creating a custom component.

module.directive('accordion', [function () {
return {
	restrict: 'E',
	replace: true,
	scope: {
		title: '='
	},
	link: function (scope, iElement, iAttrs) {
	scope.open = true;
	if (scope.title != "Content 1") {
	scope.open = false;
	}

	$(iElement[0]).click(function(event) {
	console.log('inside the click event');
	/* Act on the event */
	scope.$apply('open = !open');
	});
	},
	template: '<div class="accordion">'+
				'<h3>{{'title'}}</h3>' +
			  '<div class="accordion-content" ng-show="open" ng-animate="\'animate\'" ng-transclude></div>'+
			  '</div>',
	transclude: true
};
}]);

HTML Usage:
<accordion title="'Content 1'">Your Sample Content</accordion>
<accordion title="'Content 2'">Your Sample Content</accordion>
<accordion title="'Content 3'">Your Sample Content</accordion>

Superheroic AngularJS