Chapter 3. Custom Controls

So far, in our study of Angular, we've seen concepts (such as MVC, dependency injection, and so on) which are available in other programming languages or frameworks and you would be right in thinking, how this sets Angular apart from many other frameworks. With our current knowledge and understanding of Angular, we can write perfectly functional and beautiful-looking applications, but it still doesn't make our frontend code more maintainable—for sure, we've structured our JavaScript code into services or filters, which are injected into controllers (which might live in one or more modules), but think hard, there is still a core piece of frontend code which hasn't seen any improvement. That core piece is the HTML part.

In this chapter, we will cover the following topics:

• What are directives and why do we need them

• Naming convention of directives

• How to write directives

• Different types of directives

• Isolate scopes

• Transclusion

• Directives which communicate

Directives

The HTML code (without the directives) is still made up of divs after divs nested inside one another, and those divs make no semantic sense; except for the various class attribute values that you attach to them (or however else you have tried to give them meaning). But wouldn't it be nice if you could instead, structure your HTML like this:

<employee id="1"></employee>

Or maybe like this:

<address type="corporate"></address>

Then, you get a nice little piece of UI which displays the full address or information of the employee.

So what are directives? To repeat an oft-quoted cliché, directives teach old HTML some new tricks, and they are the ones which help us in writing custom controls. So we should write directives when we want to refactor repeated (HTML) code, to create new HTML markup and when we need to manipulate the DOM directly.

As per Angular, it is an anti-pattern to manipulate the DOM in your controllers. You must use directives for any kind of DOM...

Writing directives

Now that we've talked a lot about theory, let's put it into practice and write some directives. We'll start with very simple examples and go on to build complex ones, highlighting various aspects involved in writing directives. We'll keep using employee-related data which we've used in earlier examples to keep things simple, so here's our first simple directive.

Custom attributes

This directive uses an inline template and inherits the scope from the controller. This is not a good practice and is for illustration purposes only (as this is our very first directive). Here's the controller:

app.controller('EmployeeCtrl', ['$scope',
  function ($scope) {

    var Employee = function (name, age) {
      this.name = name;
      this.age = age;
    };

    var GetEmployees = function () {
      return [
        new Employee("First employee", 56),
        new Employee("Second employee", 44),
        new Employee("Last employee", 32)
      ];
    };

    $scope.employeeData = {
  ...

Summary

In this chapter, we learned all about directives and how directives enable us to drastically transform our HTML code by helping us write custom elements, attributes, classes, and comments. If carefully designed, directives help us write the DSL for our frontend code. We also talked about isolating the directive scope and including content in the directive using the transclude option. Finally, we talked about how directives can communicate with each other.

In the next chapter, we'll learn about Firebase, its benefits, and why to use it. We'll also learn about AngularFire, which is the officially supported Angular binding for Firebase.