This article is split into 2 sections:
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.
|dependency injection||Another core feature of Angular, this refers to a pattern of keeping functionality relatively separate and then injecting it where it is needed by another class.|
AngularJS makes it easier to build a SPA, but does not restrict you to this exclusively.
Developing with Angular
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.
In this example, the controller accepts a user clicking on the button to trigger a reset() function.
|Services, Providers, Factories, Values, Constants||
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.
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.
This will then insert "Name: Naomi Adress: 1600 Amphitheatre" into the my-customer HTML element.