Skip to content

Commit 3e32bba

Browse files
mgechevmgechev
committed
Refactoring
1 parent 583c7be commit 3e32bba

File tree

1 file changed

+160
-148
lines changed

1 file changed

+160
-148
lines changed

‎README.md‎

Lines changed: 160 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,9 @@ function MyCtrl(developer) {
240240

241241
## AngularJS Patterns
242242

243-
### Singleton
243+
### Services
244+
245+
#### Singleton
244246

245247
>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.
246248
@@ -285,7 +287,7 @@ function getService(serviceName) {
285287

286288
We can think of each service as a singleton, because each service is instantiated no more than a single time. We can consider the cache as a singleton manager. There is a slight variation from the UML diagram illustrated above because instead of keeping static, private reference to the singleton inside its constructor function, we keep the reference inside the singleton manager (stated in the snippet above as `cache`).
287289

288-
### Factory Method
290+
#### Factory Method
289291

290292
>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.
291293
@@ -369,56 +371,7 @@ The snippet above calls the `invoke` method of `instanceInjector` with the facto
369371

370372
If we think in terms of the UML diagram above we can call the provider a "ConcreteCreator" and the actual component, which is being created a "Product".
371373

372-
### Composite
373-
374-
>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.
375-
376-
![Composite](./images/composite.png "Fig. 3")
377-
378-
According to the Gang of Four, MVC is nothing more than combination of:
379-
380-
- Strategy
381-
- Composite
382-
- Observer
383-
384-
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.
385-
386-
Lets look at the following example:
387-
388-
```HTML
389-
<!doctype html>
390-
<html>
391-
<head>
392-
</head>
393-
<body>
394-
<zippy title="Zippy">
395-
Zippy!
396-
</zippy>
397-
</body>
398-
</html>
399-
```
400-
401-
```JavaScript
402-
myModule.directive('zippy', function () {
403-
return {
404-
restrict: 'E',
405-
template: '<div><div class="header"></div><div class="content" ng-transclude></div></div>',
406-
link: function (scope, el) {
407-
el.find('.header').click(function () {
408-
el.find('.content').toggle();
409-
});
410-
}
411-
}
412-
});
413-
```
414-
415-
This example defines a simple directive, which defines a UI component. The defined component (called "zippy") has header and content. Click on its header toggles the visibility of the content.
416-
417-
From the first example we can note that the whole DOM tree is a composition of elements. The root component is the `html` element, directly followed by the nested elements `head` and `body` and so on...
418-
419-
In the second, JavaScript, example we see that the `template` property of the directive, contains markup with `ng-transclude` directive inside it. So this means that inside the directive `zippy` we have another directive called `ng-transclude`, i.e. composition of directives.
420-
421-
### Decorator
374+
#### Decorator
422375

423376
>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.
424377
@@ -457,7 +410,7 @@ The example above defines new service called `foo`. In the `config` callback is
457410

458411
Using this pattern is especially useful when we need to modify the functionality of third party services.
459412

460-
### Facade
413+
#### Facade
461414

462415
>A facade is an object that provides a simplified interface to a larger body of code, such as a class library. A facade can:
463416
@@ -491,7 +444,7 @@ The second option provides pre-configured version, which creates a HTTP GET requ
491444

492445
Even higher level of abstraction is being created by `$resource`, which is build over the `$http` service.
493446

494-
### Proxy
447+
#### Proxy
495448

496449
>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.
497450
@@ -529,6 +482,97 @@ function MainCtrl($scope, $resource) {
529482
```
530483
Initially when the snippet above executes, the property `user` of the `$scope` object will be with value an empty object (`{}`). Internally AngularJS will keep reference to this empty object. When the dirty checking loop detects change in the `$scope`, AngularJS will try to set `user.name` as value of the span. Since the value is `undefined` the span will stay empty. Once the server returns response for the get request, AngularJS will populate the object with the data, received from the server. During the next `$digest` loop AngularJS will detect change in `$scope.user`, which will lead to update of the view.
531484

485+
#### Active Record
486+
487+
>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.
488+
489+
![Active Record](./images/active-record.png "Fig. 7")
490+
491+
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.
492+
493+
According to the AngularJS' documentation `$resource` is:
494+
495+
>A factory which creates a resource object that lets you interact with RESTful server-side data sources.
496+
>The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.
497+
498+
Here is how `$resource` could be used:
499+
500+
```JavaScript
501+
var User = $resource('/users/:id'),
502+
user = new User({
503+
name: 'foo',
504+
age : 42
505+
});
506+
507+
user.$save();
508+
```
509+
510+
The call of `$resource` will create a constructor function for our model instances. Each of the model instances will have methods, which could be used for the different CRUD operations.
511+
512+
This way we can use the constructor function and its static methods by:
513+
514+
```JavaScript
515+
User.get({ userid: userid });
516+
```
517+
518+
The code above will immediately return an empty object and keep referene to it. Once the response have been successfully returned and praced, AngularJS will populate this object with the received data (see [proxy](#proxy)).
519+
520+
You can find more details for `$resource` [The magic of $resource](http://blog.mgechev.com/2014/02/05/angularjs-resource-active-record-http/) and [AngularJS' documentation](https://docs.angularjs.org/api/ngResource/service/$resource).
521+
522+
`$resource` allows us to use Active Record like pattern of communication with RESTful services.
523+
524+
525+
### Partials
526+
527+
#### Composite
528+
529+
>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.
530+
531+
![Composite](./images/composite.png "Fig. 3")
532+
533+
According to the Gang of Four, MVC is nothing more than combination of:
534+
535+
- Strategy
536+
- Composite
537+
- Observer
538+
539+
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.
540+
541+
Lets look at the following example:
542+
543+
```HTML
544+
<!doctype html>
545+
<html>
546+
<head>
547+
</head>
548+
<body>
549+
<zippy title="Zippy">
550+
Zippy!
551+
</zippy>
552+
</body>
553+
</html>
554+
```
555+
556+
```JavaScript
557+
myModule.directive('zippy', function () {
558+
return {
559+
restrict: 'E',
560+
template: '<div><div class="header"></div><div class="content" ng-transclude></div></div>',
561+
link: function (scope, el) {
562+
el.find('.header').click(function () {
563+
el.find('.content').toggle();
564+
});
565+
}
566+
}
567+
});
568+
```
569+
570+
This example defines a simple directive, which defines a UI component. The defined component (called "zippy") has header and content. Click on its header toggles the visibility of the content.
571+
572+
From the first example we can note that the whole DOM tree is a composition of elements. The root component is the `html` element, directly followed by the nested elements `head` and `body` and so on...
573+
574+
In the second, JavaScript, example we see that the `template` property of the directive, contains markup with `ng-transclude` directive inside it. So this means that inside the directive `zippy` we have another directive called `ng-transclude`, i.e. composition of directives.
575+
532576
### Interpreter
533577

534578
>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.
@@ -562,7 +606,63 @@ Few sample AngularJS expressions are:
562606
(foo) ? bar : baz | toUpperCase
563607
```
564608

565-
### Observer
609+
#### Template View
610+
611+
> Renders information into HTML by embedding markers in an HTML page.
612+
613+
![Template View](./images/template-view.png "Fig. 8")
614+
615+
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 compiled to the 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 turns it into its end format.
616+
617+
Templates are very commonly used especially in the back-end.
618+
For example, you can embed PHP code inside HTML and create a dynamic page, you can use Smarty or you can use eRuby with Ruby in order to embed Ruby code inside your static pages.
619+
620+
For JavaScript there are plenty of template engines, such as mustache.js, handlebars, etc. The templates of most of these engines are embedded inside the application as strings.
621+
For example:
622+
623+
```html
624+
<script type="template/mustache">
625+
<h2>Names</h2>
626+
{{#names}}
627+
<strong>{{name}}</strong>
628+
{{/names}}
629+
</script>
630+
```
631+
632+
The template engine turns this string into DOM elements by compiling it with a given context. This way all the expressions embedded in the markup are evaluated and replaced by their value.
633+
634+
For example if we evaluate the template above in the context of the following object: `{ names: ['foo', 'bar', 'baz'] }`, so we will get:
635+
636+
```html
637+
<h2>Names</h2>
638+
<strong>foo</strong>
639+
<strong>bar</strong>
640+
<strong>baz</strong>
641+
```
642+
643+
AngularJS templates are actually HTML, they are not in an intermediate format like the traditional templates are.
644+
What AngularJS compiler does is to traverse the DOM tree and look for already known directives (elements, attributes, classes or even comments). When AngularJS finds any of these directives it invokes the logic associated with them, which may involve evaluation of different expressions in the context of the current scope.
645+
646+
For example:
647+
648+
```html
649+
<ul ng-repeat="name in names">
650+
<li>{{name}}</li>
651+
</ul>
652+
```
653+
654+
in the context of the scope:
655+
656+
```javascript
657+
$scope.names = ['foo', 'bar', 'baz'];
658+
```
659+
660+
will produce the same result as the one above. The main difference here is that the template is not wrapped inside a `script` tag but is HTML instead.
661+
662+
663+
### Scope
664+
665+
#### Observer
566666

567667
>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.
568668
@@ -596,7 +696,7 @@ The scope in the example above, triggers the event `event-name` to all scopes up
596696
Analogical is the case when the method `$broadcast` is called. The only difference is that the event would be transmitted downwards - to all children scopes.
597697
Each scope can subscribe to any event with multiple callbacks (i.e. it can associate multiple observers to given event).
598698

599-
### Chain of Responsibilities
699+
#### Chain of Responsibilities
600700

601701
>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.
602702
@@ -633,46 +733,9 @@ myModule.controller('ChildCtrl', function ($scope) {
633733

634734
The different handlers from the UML diagram above are the different scopes, injected to the controllers.
635735

636-
### Active Record
637-
638-
>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.
639-
640-
![Active Record](./images/active-record.png "Fig. 7")
641-
642-
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.
643-
644-
According to the AngularJS' documentation `$resource` is:
645-
646-
>A factory which creates a resource object that lets you interact with RESTful server-side data sources.
647-
>The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.
648-
649-
Here is how `$resource` could be used:
650-
651-
```JavaScript
652-
var User = $resource('/users/:id'),
653-
user = new User({
654-
name: 'foo',
655-
age : 42
656-
});
657-
658-
user.$save();
659-
```
660-
661-
The call of `$resource` will create a constructor function for our model instances. Each of the model instances will have methods, which could be used for the different CRUD operations.
662-
663-
This way we can use the constructor function and its static methods by:
664-
665-
```JavaScript
666-
User.get({ userid: userid });
667-
```
668-
669-
The code above will immediately return an empty object and keep referene to it. Once the response have been successfully returned and praced, AngularJS will populate this object with the received data (see [proxy](#proxy)).
670-
671-
You can find more details for `$resource` [The magic of $resource](http://blog.mgechev.com/2014/02/05/angularjs-resource-active-record-http/) and [AngularJS' documentation](https://docs.angularjs.org/api/ngResource/service/$resource).
672-
673-
`$resource` allows us to use Active Record like pattern of communication with RESTful services.
736+
### Controllers
674737

675-
### Page Controller
738+
#### Page Controller
676739

677740
>An object that handles a request for a specific page or action on a Web site. Martin Fowler
678741
@@ -722,60 +785,9 @@ The most appropriate location to verify that the user is already authenticated i
722785

723786
The `ChildCtrl` is responsible for handling actions such as clicking the button with label `"Click"` and exposing the model to the view, by attaching it to the scope.
724787

725-
### Template View
726-
727-
> Renders information into HTML by embedding markers in an HTML page.
728-
729-
![Template View](./images/template-view.png "Fig. 8")
730-
731-
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 compiled to the 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 turns it into its end format.
732-
733-
Templates are very commonly used especially in the back-end.
734-
For example, you can embed PHP code inside HTML and create a dynamic page, you can use Smarty or you can use eRuby with Ruby in order to embed Ruby code inside your static pages.
735-
736-
For JavaScript there are plenty of template engines, such as mustache.js, handlebars, etc. The templates of most of these engines are embedded inside the application as strings.
737-
For example:
738-
739-
```html
740-
<script type="template/mustache">
741-
<h2>Names</h2>
742-
{{#names}}
743-
<strong>{{name}}</strong>
744-
{{/names}}
745-
</script>
746-
```
747-
748-
The template engine turns this string into DOM elements by compiling it with a given context. This way all the expressions embedded in the markup are evaluated and replaced by their value.
749-
750-
For example if we evaluate the template above in the context of the following object: `{ names: ['foo', 'bar', 'baz'] }`, so we will get:
751-
752-
```html
753-
<h2>Names</h2>
754-
<strong>foo</strong>
755-
<strong>bar</strong>
756-
<strong>baz</strong>
757-
```
758-
759-
AngularJS templates are actually HTML, they are not in an intermediate format like the traditional templates are.
760-
What AngularJS compiler does is to traverse the DOM tree and look for already known directives (elements, attributes, classes or even comments). When AngularJS finds any of these directives it invokes the logic associated with them, which may involve evaluation of different expressions in the context of the current scope.
761-
762-
For example:
763-
764-
```html
765-
<ul ng-repeat="name in names">
766-
<li>{{name}}</li>
767-
</ul>
768-
```
769-
770-
in the context of the scope:
771-
772-
```javascript
773-
$scope.names = ['foo', 'bar', 'baz'];
774-
```
775-
776-
will produce the same result as the one above. The main difference here is that the template is not wrapped inside a `script` tag but is HTML instead.
788+
### Common
777789

778-
### Module Pattern
790+
#### Module Pattern
779791

780792
This is actually not a design pattern from Gang of Four, neither one from P of EAA. This is a tranditional JavaScript pattern, which main goal is to provide encapsulation and privacy.
781793

0 commit comments

Comments
 (0)