Externalize the patterns update content

Author: mgechev

README.md

@@ -19,23 +19,7 @@
   * [Services](#services)
   * [Dependency Injection](#dependency-injection)
   * [Zones](#zones)
-* [AngularJS Patterns](#angularjs-patterns)
-  * [Catalog](#catalog)
-    * [Singleton](#singleton)
-    * [Factory Method](#factory-method)
-    * [Decorator](#decorator)
-    * [Facade](#facade)
-    * [Proxy](#proxy)
-    * [Active Record](#active-record)
-    * [Intercepting Filters](#intercepting-filters)
-    * [Composite](#composite)
-    * [Template View](#template-view)
-    * [Observer](#observer)
-    * [Chain of Responsibilities](#chain-of-responsibilities)
-    * [Command](#command)
-    * [Page Controller](#page-controller)
-    * [Module Pattern](#module-pattern)
-    * [Data Mapper](#data-mapper)
+* [AngularJS in Patterns](#angularjs-in-patterns)
   * [AngularJS](#angularjs)
     * [Services](#services-1)
       * [Singleton](#singleton)
@@ -59,6 +43,17 @@
       * [Module Pattern](#module-pattern)
       * [Data Mapper](#data-mapper)
   * [Angular 2](#angular-2)
+    * [Components](#components-1)
+      * [Composite](#composite-2)
+      * [Memento](#memento)
+      * [Interpreter](#interpreter-2)
+      * [Visitor](#visitor)
+      * [Strategy](#strategy)
+      * [Builder](#builder)
+      * [Adapter](#adapter)
+      * [Facade](#facade-2)
+      * [Object Pool](#object-pool)
+
 * [References](#references)
 
 <!--endtoc-->
@@ -276,21 +271,15 @@ function MyCtrl(Developer) {
 }
 ```
 
-## AngularJS Patterns
+## AngularJS in Patterns
 
 In the next a couple of sections, we are going to take a look how the traditional design and architectural patterns are composed in the AngularJS components.
 
 In the last chapter we are going to take a look at some architectural patterns, which are frequently used in the development of Single-Page Applications with (but not limited to) AngularJS.
 
 ### Services
 
-#### Singleton
-
->The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects.
-
-In the UML diagram bellow is illustrated the singleton design pattern.
-
-![Singleton](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/singleton.svg "Fig. 1")
+<!-- include singleton -->
 
 When given dependency is required by any component, AngularJS resolves it using the following algorithm:
 
@@ -338,9 +327,7 @@ For further discussion on this topic Misko Hevery's [article](http://googletesti
 
 #### Factory Method
 
->The factory method pattern is a creational pattern, which uses factory methods to deal with the problem of creating objects without specifying the exact class of object that will be created. This is done by creating objects via a factory method, which is either specified in an interface (abstract class) and implemented in implementing classes (concrete classes); or implemented in a base class, which can be overridden when inherited in derived classes; rather than by a constructor.
-
-![Factory Method](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/factory-method.svg "Fig. 2")
+<!-- include factory-method -->
 
 Lets consider the following snippet:
 
@@ -428,9 +415,7 @@ There are a few benefits of using the factory method pattern in this case, becau
 
 #### Decorator
 
->The decorator pattern (also known as Wrapper, an alternative naming shared with the Adapter pattern) is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.
-
-![Decorator](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/decorator.svg "Fig. 4")
+<!-- include decorator -->
 
 AngularJS provides out-of-the-box way for extending and/or enhancing the functionality of already existing services. Using the method `decorator` of `$provide` you can create "wrapper" of any service you have previously defined or used by a third-party:
 
@@ -468,17 +453,7 @@ Using this pattern is especially useful when we need to modify the functionality
 
 #### Facade
 
->A facade is an object that provides a simplified interface to a larger body of code, such as a class library. A facade can:
-
->1. make a software library easier to use, understand and test, since the facade has convenient methods for common tasks;
-
->2. make the library more readable, for the same reason;
-
->3. reduce dependencies of outside code on the inner workings of a library, since most code uses the facade, thus allowing more flexibility in developing the system;
-
->4. wrap a poorly designed collection of APIs with a single well-designed API (as per task needs).
-
-![Facade](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/facade.svg "Fig. 11")
+<!-- include facade -->
 
 There are a few facades in AngularJS. Each time you want to provide higher level API to given functionality you practically create a facade.
 
@@ -527,9 +502,7 @@ Even higher level of abstraction is being created by `$resource`, which is build
 
 #### Proxy
 
->A proxy, in its most general form, is a class functioning as an interface to something else. The proxy could interface to anything: a network connection, a large object in memory, a file, or some other resource that is expensive or impossible to duplicate.
-
-![Proxy](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/proxy.svg "Fig. 9")
+<!-- include proxy -->
 
 We can distinguish three different types of proxy:
 
@@ -565,9 +538,7 @@ Initially when the snippet above executes, the property `user` of the `$scope` o
 
 #### Active Record
 
->The Active Record object is an object, which carries both data and behavior. Usually most of the data in these objects is persistent, responsibility of the Active Record object is to take care of the communication with the database in order to create, update, retrieve or delete the data. It may delegate this responsibility to lower level objects but calls to instance or static methods of the active record object cause the database communication.
-
-![Active Record](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/active-record.svg "Fig. 7")
+<!-- include active-record -->
 
 AngularJS defines a service called `$resource`. In the current version of AngularJS (1.2+) it is being distributed in module outside of the AngularJS' core.
 
@@ -608,9 +579,7 @@ Since Martin Fowler states that
 
 #### Intercepting Filters
 
->Create a chain of composable filters to implement common pre-processing and post-processing tasks during a Web page request.
-
-![Composite](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/intercepting-filters.svg "Fig. 3")
+<!-- include intercepting-filters -->
 
 In some cases you need to do some kind of pre and/or post processing of HTTP requests. In the case of the Intercepting Filters you pre/post process given HTTP request/response in order to include logging, security or any other concern, which is influenced by the request body or headers. Basically the Intercepting Filters pattern include a chain of filters, each of which process data in given order. The output of each filter is input of the next one.
 
@@ -637,9 +606,7 @@ $httpProvider.interceptors.push(function($q, dependency1, dependency2) {
 
 #### 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](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/composite.svg "Fig. 3")
+<!-- include composite -->
 
 According to the Gang of Four, MVC is nothing more than combination of:
 
@@ -686,9 +653,7 @@ In the second, JavaScript, example we see that the `template` property of the di
 
 ### Interpreter
 
->In computer programming, the interpreter pattern is a design pattern that specifies how to evaluate sentences in a language. The basic idea is to have a class for each symbol (terminal or nonterminal) in a specialized computer language. The syntax tree of a sentence in the language is an instance of the composite pattern and is used to evaluate (interpret) the sentence.
-
-![Interpreter](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/interpreter.svg "Fig. 6")
+<!-- include interpreter -->
 
 Behind its `$parse` service, AngularJS provides its own implementation of interpreter of a DSL (Domain Specific Language). The used DSL is simplified and modified version of JavaScript.
 The main differences between the JavaScript expressions and AngularJS expressions that AngularJS expressions:
@@ -756,9 +721,7 @@ Few sample AngularJS expressions are:
 
 #### Template View
 
-> Renders information into HTML by embedding markers in an HTML page.
-
-![Template View](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/template-view.svg "Fig. 8")
+<!-- include template-view -->
 
 The dynamic page rendering is not that trivial thing. It is connected with a lot of string concatenations, manipulations and frustration. Far easier way to build your dynamic page is to write your markup and embed little expressions inside it, which are lately evaluated in given context and so the whole template is being compiled to its end format. In our case this format is going to be HTML (or even DOM). This is exactly what the template engines do - they take given DSL, evaluate it in the appropriate context and then turn it into its end format.
 
@@ -813,9 +776,7 @@ will produce the same result as the one above. The main difference here is that
 
 #### Observer
 
->The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods. It is mainly used to implement distributed event handling systems.
-
-![Observer](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/observer.svg "Fig. 7")
+<!-- pattern observer -->
 
 There are two basic ways of communication between the scopes in an AngularJS application. The first one is calling methods of parent scope by a child scope. This is possible since the child scope inherits prototypically by its parent, as mentioned above (see [Scope](#scope)). This allows communication in a single direction - child to parent. Some times it is necessary to call method of given child scope or notify it about a triggered event in the context of the parent scope. AngularJS provides built-in observer pattern, which allows this. Another possible use case, of the observer pattern, is when multiple scopes are interested in given event but the scope, in which context the event is triggered, is not aware of them. This allows decoupling between the different scopes, non of the scopes should be aware of the rest of the scopes.
 
@@ -849,9 +810,7 @@ In the JavaScript community this pattern is better known as publish/subscribe.
 
 #### Chain of Responsibilities
 
->The chain-of-responsibility pattern is a design pattern consisting of a source of command objects and a series of processing objects. Each processing object contains logic that defines the types of command objects that it can handle; the rest are passed to the next processing object in the chain. A mechanism also exists for adding new processing objects to the end of this chain.
-
-![Chain of Responsibilities](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/chain-of-responsibilities.svg "Fig. 5")
+<!-- include chain-of-responsibilities -->
 
 As stated above the scopes in an AngularJS application form a hierarchy known as the scope chain. Some of the scopes are "isolated", which means that they don't inherit prototypically by their parent scope, but are connected to it via their `$parent` property.
 
@@ -886,9 +845,7 @@ The different handlers from the UML diagram above are the different scopes, inje
 
 #### Command
 
->In object-oriented programming, the command pattern is a behavioral design pattern in which an object is used to represent and encapsulate all the information needed to call a method at a later time. This information includes the method name, the object that owns the method and values for the method parameters.
-
-![Command](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/command.svg "Fig. 11")
+<!-- include command -->
 
 Before continuing with the application of the command pattern lets describe how AngularJS implements data binding.
 
@@ -931,9 +888,7 @@ We can think of the `watcher` object as a command. The expression of the command
 
 #### Page Controller
 
->An object that handles a request for a specific page or action on a Web site. Martin Fowler
-
-![Page Controller](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/page-controller.svg "Fig. 8")
+<!-- include page-controller -->
 
 According to [4](#references) the page controller:
 
@@ -983,34 +938,7 @@ The `ChildCtrl` is responsible for handling actions such as clicking the button
 
 #### Module Pattern
 
-This is actually not a design pattern from Gang of Four, neither one from P of EAA. This is a traditional JavaScript pattern, which main goal is to provide encapsulation and privacy.
-
-Using the module pattern you can achieve privacy based on the JavaScript's functional lexical scope. Each module may have zero or more private members, which are hidden in the local scope of a function. This function returns an object, which exports the public API of the given module:
-
-```javascript
-var Page = (function () {
-
-  var title;
-
-  function setTitle(t) {
-    document.title = t;
-    title = t;
-  }
-
-  function getTitle() {
-    return title;
-  }
-
-  return {
-    setTitle: setTitle,
-    getTitle: getTitle
-  };
-}());
-```
-
-In the example above we have IIFE (Immediately-Invoked Function Expression), which after being called returns an object, with two methods (`setTitle` and `getTitle`). The returned object is being assigned to the `Page` variable.
-
-In this case the user of the `Page` object doesn't has direct access to the `title` variable, which is defined inside the local scope of the IIFE.
+<!-- include module-pattern -->
 
 The module pattern is very useful when defining services in AngularJS. Using this pattern we can simulate (and actually achieve) privacy:
 
@@ -1037,9 +965,7 @@ Once we want to inject `foo` inside any other component we won't be able to use
 
 ### Data Mapper
 
->A Data Mapper is a Data Access Layer that performs bidirectional transfer of data between a persistent data store (often a relational database) and an in memory data representation (the domain layer). The goal of the pattern is to keep the in memory representation and the persistent data store independent of each other and the data mapper itself.
-
-![Data Mapper](https://rawgit.com/mgechev/angularjs-in-patterns/master/images/data-mapper.svg "Fig. 10")
+<!-- include data-mapper -->
 
 As the description above states, the data mapper is used for bidirectional transfer of data between a persistent data store and an in memory data representation. Usually our AngularJS application communicates with API server, which is written in any server-side language (Ruby, PHP, Java, JavaScript, etc.).