AngularJS: Controllers, Directives, Services, Providers, Factories, Helpers explained

posted in: AngularJS, JavaScript, Standards | 0

Controllers

AngularJS controllers is a function that adds additional functionality to the scope of the view. It sets up an initial state and adds custom behavior to the scope object.
[NOTE: best-practice to name our controllers as [Name]Controller, rather than [Name]Ctrl.]

app.controller('RowController', function ($scope) {
   // controller makes changes to $scope    
})

Directives

Directives are re-usable components which bind model values to DOM properties and react on DOM events to update model values.

Directives are Angular’s method of creating new HTML elements that have their own custom functionality. It is simply a function that we run on a particular DOM element.

[NOTE: To avoid collision with future HTML standards it’s best practice to prefix a custom directive with a custom namespace. Angular uses a ng- prefix, so we can use my- prefix (e.g. ite-directive)]

.directive('iteAddARow', function() {
   // directive definition goes here
})

Directive options:

.directive('myDirective', function() {
	return {
		restrict: String,
		priority: Number,
		terminal: Boolean,
		template: String or Template Function: function(tElement, tAttrs) (...},
	        templateUrl: String,
	        replace: Boolean or String,
	        scope: Boolean or Object,
	        transclude: Boolean,
	        controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
	        controllerAs: String,
	        require: String,
	        link: function(scope, iElement, iAttrs) { ... },
	        compile: // return an Object OR the link function
		// as in below:
		function(tElement, tAttrs, transclude) {
			return {
				pre: function(scope, iElement, iAttrs, controller) { ... },
				post: function(scope, iElement, iAttrs, controller) { ... }
			}
			// or
			return function postLink(...) { ... }
		}
	
};

Services:

Controllers and Directives ties the view is to $scope and controller manages the data but controllers are instantiated
only when they are needed and discarded when they are not. That means that every time we switch a route or reload a view, the current controller gets cleaned up by Angular.

Services provide a method for us to keep data around for the lifetime of the app and communicate across controllers in a consistent manner.

$http, for instance, is an example of an AngularJS service (a singleton that is instantiated only once per app).

// Example service that holds on to the current_user for the lifetime of the app
angular.module('myApp', [])
   .factory('UserService', function($http) {
      var current_user;

      return {
         getCurrentUser: function() {
            return current_user;
         },
         setCurrentUser: function(user) {
            current_user = user;
         }
      }
});

Using services:

We need to inject it into our controller/directive/filter/service

.controller('ServiceController',
   function($scope, myService) {
      ...
   }
)

TODO:

Providers, Factories, Helpers

Leave a Reply