Directives in AngularJS

Considering the fact that I discussed MVC in the introduction, it would be very tempting to structure this tutorial by the AngularJS implementation of models, views and controllers. But there is a construct so fundamental to AngularJS that to not start with it would be an error.

That construct is directives. AngularJS describes itself as â€œHTML enhanced for web apps.â€ Directives are what facilitate this enhancement; they extend the capability of HTML elements.

I often find analogies to be a useful tool for explaining abstract concepts, such as directives. Consider a homeowner who is having some building work completed on their house. The team of laborers required to complete any non-trivial building project is varied in role and might include:

a bricklayer
an outfitter
a plumber

The types of capability directives extend HTML elements with can be categorized similarly:

structural
decorative
plumbing

If we keep the analogy going a moment longer, HTML is the house and directives are the team of laborers.

Previously I introduced a sample application that we will build during this tutorial. Letâ€™s build uponÂ that by displaying an article title contained within a plain JavaScript object:

var article = {
  title: "Learn AngularJS"
};

var article = {

title: "Learn AngularJS"

};

Edit index.html to contain the ng-app, ng-controller and ng-bind directives as follows:

<html ng-app="tutsocean">
  <head>
    <title>tutsocean - admin area</title>
  </head>
  <body ng-controller="articleCtrl">
    <div ng-bind="title"></div>
    <div ng-bind="getTitle()"></div>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="controllers.js"></script>
  </body>
</html>

<head>

<title>tutsocean - admin area</title>

</head>

</body>

</html>

Youâ€™ll notice that two .js files have appeared. There is a small amount of JavaScript required to make the article title appear in the <div>s and app.js and controllers.js is where it happens. Before we create them, I want to briefly discuss the three directives introduced in the above snippet.

ng-app

ng-app is a plumbing directive. AngularJS looks for which HTML element has the ng-app directive attached to it and uses it to bootstrap an application. ng-app can be placed on any HTML element, not just <html>, and connects a module (in our case, â€˜udemyAdminâ€™) to it. Modules will be covered shortly.

ng-controller

ng-controller is a plumbing directive. It connects a model and any related behaviors to a branch of the HTML tree made available by the usage of ng-app.

ng-bind

ng-bind is a plumbing directive. It connects a model property or the result of a model behavior to the text content of an HTML element. In our example, the titleproperty and getTitle behaviour is available becauseÂ ng-bind has been used on a<div> which is a child of <body> (where ng-controller has been used).

Edit the contents of app.js as follows:

angular.module('tutsocean', []);

1	angular.module('tutsocean', []);

In the above snippet, we first create a module called â€˜tutoceanâ€™. This module is created with no dependencies (denoted by the empty array). Modules allow us to partition different parts of an application anytime we wish; this is useful in larger applications. For example, a full tutsoceanÂ blog application might be partitioned as follows:

angular.module('tutsocean', ['tutsocean.courses', 'tutsocean.authors', 'tutsocean.students']);
angular.module('tutsocean.courses', ['tutsocean.courses.archived', 'tutsocean.courses.current']);
// and so on

angular.module('tutsocean', ['tutsocean.courses', 'tutsocean.authors', 'tutsocean.students']);

angular.module('tutsocean.courses', ['tutsocean.courses.archived', 'tutsocean.courses.current']);

// and so on

Edit the contents of controllers.js as follows:

<!DOCTYPE html>
angular.module('tutsocean').controller('articleCtrl', function($scope) {
  var title = "Learn AngularJS";

  $scope.title = title;
  $scope.getTitle = function() {
    return title;
  };
});

<!DOCTYPE html>

angular.module('tutsocean').controller('articleCtrl', function($scope) {

var title = "Learn AngularJS";

$scope.title = title;

$scope.getTitle = function() {

return title;

};

});

In the above snippet, we first retrieve the â€˜tutsoceanâ€™ module (angular.module is dual operation based on the number of arguments) and then register a controller within it. $scope is a core AngularJS component available for injection to controllers (we cover injection in a later section of this tutorial). $scope is the model exposed by articleCtrl;Â we add properties and behaviors we want to be available for use in our HTML.

Although app.js and controllers.js are very small at the moment, they will grow as this tutorial progresses and it is useful to refer to snippets of code by file name.