AngularJS is:

A JavaScript Framework for Single Page Applications.

Why use AngularJS:

Let's you build complex Single Page Applications in a very easy way. It adds a lot of features to the DOM, so you are able to create interaction between data and user,

with re-usable components.

What can you build with AngularJS:

With AngularJS you can build anything you can imagine!

Re-usable business logic for the data.

You can use a service in an Angular controller, directive, filter etc.

The difference between a Service and Factory is very small. Read the explanation here: Service VS Factory

> Example service

'use strict';

/**
 * Array service
 */
angular.module('angularApp')
  .service('arrayService', function() {

    function swapArray(tempArray, newArray, indexA, indexB) {
      var temp = tempArray[indexA];
      tempArray[indexA] = tempArray[indexB];
      tempArray[indexB] = temp;
      newArray = tempArray;
      return newArray;
    }

    this.moveUpInArray = function(data, arrayIndex, callback) {
      var newIndex = arrayIndex - 1;
      var newArray = swapArray(data, data, arrayIndex, newIndex);

      if (newArray) {
        callback(newArray);
      }
    };

    this.moveDownInArray = function(data, arrayIndex, callback) {
      var newIndex = arrayIndex + 1;
      var newArray = swapArray(data, data, arrayIndex, newIndex);
      if (newArray) {
        console.log('newArray: ', newArray);
        callback(newArray);
      }
    };

  });

'use strict';

/**
 * categoryNew controller of the angularApp
 */
angular.module('angularApp')
  .controller('categoryNew', 
    function ($scope, $state, currentUser, CategoriesFactory) {
        $scope.page = {
          title: 'New categorie',
          subtitle: 'checkout the restaurants...'
        };
    
        $scope.categories = new CategoriesFactory();
        $scope.currentUser = currentUser;
    
        $scope.createNewCategory = function() {
    
          console.log('products: ', $scope.categories);
    
          $scope.categories.restaurantID = $scope.currentUser.id;
    
          $scope.categories.$addNew({}, function(data) {
            // it worked!
            $state.go('categories.list');
          }, function(error) {
            console.error('Error: ', error.data.errors);
          });
        };
  });

Custom HTML elements & attributes.

Directives are the biggest power of AngularJS.

Directives help you build re-usable custom HTML elements. These directive's can include for example a Google maps, with search functionality. Or a special button.

> Example directive

'use strict';

/**
 * Special button directive
 */
angular.module('angularApp')
  .directive('specialButton', function () {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var activatedClass = 'btn-activated';
        var status = attrs.activateButton;
        var activate = function() {
          element.addClass(activatedClass);
          setTimeout(function() {
            element.removeClass(activatedClass);
          }, 1000 );
        };

        element.on('click', function() {
          if (!element.hasClass(activatedClass) && status === 'success') {
            element.addClass('btn-activated-success');
            setTimeout(function() {
              element.removeClass('btn-activated-success');
            }, 1000 );
          } else if (!element.hasClass(activatedClass) && status === 'error') {
            element.addClass('btn-activated-error');
            setTimeout(function() {
              element.removeClass('btn-activated-error');
            }, 1000 );
          } else if (!element.hasClass(activatedClass)) {
            activate();
          }
        });
      }
    };
  });

With filter you add logic to expression's.

In the HTML you will find {{expressions}} to output the data.

If you want to format your expression, for example a date, you add it to your {{expression | date}} with a pipe.

> Example filter