<commit_before>---
title: AngularJS in Patterns (Part 3)
author: minko_gechev
layout: post
permalink: /2014/07/05/angularjs-in-patterns-part-3/
categories:
  - AngularJS
  - JavaScript
  - Object-Oriented Programming
  - OpenSource
  - Patterns
  - Programming
  - Web development
tags:
  - AngularJS
  - AngularJS overview
  - Design patterns
  - Development
  - JavaScript
  - Object-Oriented Programming
  - patterns
  - Programming
  - Software engineering
  - web application
---


## Introduction

<blockquote>
This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.
</blockquote>

[Link](http://blog.mgechev.com/2014/05/08/angularjs-in-patterns-part-1-overview-of-angularjs/) to the first part of the series.
[Link](http://blog.mgechev.com/2014/06/08/angularjs-in-patterns-part-2-services/) to the second part of the series.

This is the last blog post of the series "AngularJS in Patterns". You can find the original GitHub repository, which contains all the information at [github.com/mgechev/angularjs-in-patterns](https://github.com/mgechev/angularjs-in-patterns). If you want to be aware of my up-coming work, you can follow me at [github.com/mgechev](https://github.com/mgechev).

### Directives

#### Composite

>The composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies.

![Composite](/images/patterns/structural/composite.svg "Fig. 3")

According to the Gang of Four, MVC is nothing more than combination of:

- Strategy
- Composite
- Observer

They state that the view is composition of components. In AngularJS the situation is similar. Our views are formed by a composition of directives and DOM elements, on which these directives could be applied.

Lets look at the following example:

{% highlight html %}
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <zippy title="zippy">
      zippy!
    </zippy>
  </body>
</html>
{% endhighlight %}

{% highlight javascript %}
myModule.directive('zippy', function () {
  return {
    restrict: 'E',
    template: '<div><div class="header&quot;></div><div class=&quot;content&quot; ng-transclude>&lt;/div>&lt;/div>',
    link: function (scope, el) {
      el.find('.header').click(function () {
        el.find('.content').toggle();<commit_msg>Update special chars<commit_after>---
title: AngularJS in Patterns (Part 3)
author: minko_gechev
layout: post
permalink: /2014/07/05/angularjs-in-patterns-part-3/
categories:
  - AngularJS
  - JavaScript
  - Object-Oriented Programming
  - OpenSource
  - Patterns
  - Programming
  - Web development
tags:
  - AngularJS
  - AngularJS overview
  - Design patterns
  - Development
  - JavaScript
  - Object-Oriented Programming
  - patterns
  - Programming
  - Software engineering
  - web application
---


## Introduction

<blockquote>
This publication aims to provide a more theoretical overview of some of the AngularJS components in order to show you how the things you are already familiar with (like different Object-Oriented Design Patterns) fit in the picture.
</blockquote>

[Link](http://blog.mgechev.com/2014/05/08/angularjs-in-patterns-part-1-overview-of-angularjs/) to the first part of the series.
[Link](http://blog.mgechev.com/2014/06/08/angularjs-in-patterns-part-2-services/) to the second part of the series.

This is the last blog post of the series "AngularJS in Patterns". You can find the original GitHub repository, which contains all the information at [github.com/mgechev/angularjs-in-patterns](https://github.com/mgechev/angularjs-in-patterns). If you want to be aware of my up-coming work, you can follow me at [github.com/mgechev](https://github.com/mgechev).

### Directives

#### Composite

>The composite pattern is a partitioning design pattern. The composite pattern describes that a group of objects are to be treated in the same way as a single instance of an object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies.

![Composite](/images/patterns/structural/composite.svg "Fig. 3")

According to the Gang of Four, MVC is nothing more than combination of:

- Strategy
- Composite
- Observer

They state that the view is composition of components. In AngularJS the situation is similar. Our views are formed by a composition of directives and DOM elements, on which these directives could be applied.

Lets look at the following example:

{% highlight html %}
<!doctype html>
<html>
  <head>
  </head>
  <body>
    <zippy title="zippy">
      zippy!
    </zippy>
  </body>
</html>
{% endhighlight %}

{% highlight javascript %}
myModule.directive('zippy', function () {
  return {
    restrict: 'E',
    template: '<div><div class="header"></div><div class="content" ng-transclude></div></div>',
    link: function (scope, el) {
      el.find('.header').click(function () {
        el.find('.content').toggle();
{'fraction_non_alphanumeric': 0.10628111834546151, 'fraction_numerical': 0.011106855610877058, 'mean_word_length': 3.8676607642124883, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4146343', 'n_tokens_mistral': 1616, 'n_tokens_neox': 1499, 'n_words': 559}