Skip to content

Commit 18abe83

Browse files
committed
Add additional information about interpreter
1 parent 9be1db9 commit 18abe83

File tree

1 file changed

+41
-4
lines changed

1 file changed

+41
-4
lines changed

README.md

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -573,7 +573,7 @@ Since Martin Fowler states that
573573
574574
`$resource` does not implements exactly the Active Record pattern, since it communicates with RESTful service instead of the database. Anyway, we can consider it as "Active Record like RESTful communication".
575575

576-
### Partials
576+
### Directives
577577

578578
#### Composite
579579

@@ -618,19 +618,19 @@ myModule.directive('zippy', function () {
618618
});
619619
```
620620

621-
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.
621+
This example defines a simple directive, which is a UI component. The defined component (called "zippy") has header and content. Click on its header toggles the visibility of the content.
622622

623623
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...
624624

625-
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.
625+
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. Theoretically we can nest the components infinitely until we reach a leaf node.
626626

627627
### Interpreter
628628

629629
>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.
630630
631631
![Interpreter](./images/interpreter.png "Fig. 6")
632632

633-
Inside its `$parse` service, AngularJS has its own interpreter of a DSL. The used DSL is simplified and modified version of JavaScript.
633+
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.
634634
The main differences between the JavaScript expressions and AngularJS expressions that AngularJS expressions:
635635

636636
- may contain filters with UNIX like pipe syntax
@@ -649,6 +649,43 @@ var Parser;
649649

650650
Once given expression have been tokenized it is cached internally, because of performance concerns.
651651

652+
The terminal expressions in the AngularJS DSL are defined as follows:
653+
654+
```JavaScript
655+
var OPERATORS = {
656+
/* jshint bitwise : false */
657+
'null':function(){return null;},
658+
'true':function(){return true;},
659+
'false':function(){return false;},
660+
undefined:noop,
661+
'+':function(self, locals, a,b){
662+
//...
663+
},
664+
'*':function(self, locals, a,b){return a(self, locals)*b(self, locals);},
665+
'/':function(self, locals, a,b){return a(self, locals)/b(self, locals);},
666+
'%':function(self, locals, a,b){return a(self, locals)%b(self, locals);},
667+
'^':function(self, locals, a,b){return a(self, locals)^b(self, locals);},
668+
'=':noop,
669+
'===':function(self, locals, a, b){return a(self, locals)===b(self, locals);},
670+
'!==':function(self, locals, a, b){return a(self, locals)!==b(self, locals);},
671+
'==':function(self, locals, a,b){return a(self, locals)==b(self, locals);},
672+
'!=':function(self, locals, a,b){return a(self, locals)!=b(self, locals);},
673+
'<':function(self, locals, a,b){return a(self, locals)<b(self, locals);},
674+
'>':function(self, locals, a,b){return a(self, locals)>b(self, locals);},
675+
'<=':function(self, locals, a,b){return a(self, locals)<=b(self, locals);},
676+
'>=':function(self, locals, a,b){return a(self, locals)>=b(self, locals);},
677+
'&&':function(self, locals, a,b){return a(self, locals)&&b(self, locals);},
678+
'||':function(self, locals, a,b){return a(self, locals)||b(self, locals);},
679+
'&':function(self, locals, a,b){return a(self, locals)&b(self, locals);},
680+
'|':function(self, locals, a,b){return b(self, locals)(self, locals, a(self, locals));},
681+
'!':function(self, locals, a){return !a(self, locals);}
682+
};
683+
```
684+
685+
We can think of the function associated with each terminal as implementation of the `AbstractExpression`'s interface.
686+
687+
Each `Client` interprets given AngularJS expression in a specific context - specific scope.
688+
652689
Few sample AngularJS expressions are:
653690

654691
```JavaScript

0 commit comments

Comments
 (0)