Overview of basic terms in AngularJS

An acronym for Model-View-Controller, a pattern for organising code so that functionality for Models, Views, and Controllers are separated into different components. Angular uses a MVC pattern.

* Note: Technically Angular calls itself a "MVW" framework which stands for Model-View-Whatever. This implies that it can be used as a MVC framework, or similar patterns like Model-View-ViewModel (MVVM).

One of the key advantages to using Angular instead of jQuery. Data binding means that when an element is changed in the user interface, the underlying data model is also changed. This is done automatically with Angular, but needs to be manually built in jQuery.

Commonly also referred to as "two-way data-binding" to show that these changes occur in both directions, ie:

1. UI element is changed, the data model is changed

2. Data model is changed, the UI element is changed.

An acronym for Single Page Application, a type of web application where after the initial page load subsequent content (or pages) are loaded dynamically via javascript, rather than relying on traditional links. The main benefit of this approach is a more fluid user experience, since less time is spent reloading repeated page elements (eg headers and footers usually).

AngularJS makes it easier to build a SPA, but does not restrict you to this exclusively.

Angular lets developers add extra attributes to HTML elements, which the framework then uses for enhanced functionality. These are usually written in HTML with the "ng" prefix, and allows you to add functionality quickly.

For example in this snippet below, the ng-show attribute will automatically show this div element when the 'loading' variable is set, and automatically hide if 'loading' is false.

<div ng-show = "loading" >Checking your answers...</div>

Javascript classes which interpret user inputs and data changes to update other data and / or the user interface.

In this example, the controller accepts a user clicking on the button to trigger a reset() function.

<button ng-click = "reset()" >Reset!</button>

var myApp = angular.module('myApp',[]);

myApp.controller('ProductController', ['$scope', function($scope) {
  $scope.numberOfProducts = 15;

  $scope.reset = function(){
    $scope.numberOfProducts = 0;
  }
}]);

These are all Angular classes that deal with manipulating data, the equivalent of a "model" in a server-side framework like Ruby on Rails. They are all essentially the same object, built on top of a Provider. Providers enable you to be more flexible in your code, but require more configuration. The others (Services, Factories, etc) are light wrappers on top of a Provider, enabling you to get going quicker at the expense of some loss in flexibility. 

When you are starting out, you can treat these almost interchangeably although you eventually you may want to read more about their differences.

These are short helpers which format the display of data to the user. There are many default filters that ship with Angular, or you can also write your own custom filters. Filters can be used in many places, eg view templates, controllers, services, directives.

Here's a default filter which formats a number to 2 decimal places, used in a view template. It will display as 1234.00.

<div>
  {{ 1234 | number:2 }}
</div>

Directives are a powerful AngularJS feature, enabling you to create "super" (non-standard) HTML elements which have pre-defined functionality and are displayed in a set manner.

For example, you could create a my-customer directive to consistently display customer information throughout your site.

<div ng-controller = "MyController" >
  <my-customer></my-customer>
</div>

angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
}])
.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}} Address: {{customer.address}}'
  };
});