Overview of basic terms in AngularJS

Mar 25th, 2015 in  by Michael Cho

A glossary of terms commonly used in Angular JS documentation and tutorials.

 This article is split into 2 sections:

  1. Describing Angular
  2. Developing with Angular

Describing Angular

Javascript framework Angular is a package of basic functionality which helps developers write applications in a structured way (ie a framework). Javascript is used as the language for this framework, nearly always on the client / browser side (this is not server-side JS).
MVC

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).

data-binding

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. 
SPA

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.

 

Developing with Angular

HTML attributes

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>

Controllers

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;
  }
}]);

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.

Filters

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

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}}'
  };
});

This will then insert "Name: Naomi Adress: 1600 Amphitheatre" into the my-customer HTML element.

Other articles you may like

Introduction to Client-Side Javascript in 2018
Sep 30th, 2018
Supercharged Javascript and CSS animations
Apr 21st, 2015
Testing a $rootScope broadcast event with Jasmine
Feb 23rd, 2015
Should I use AngularJS or jQuery?
Jan 30th, 2015