diff --git a/docs/content/guide/concepts.ngdoc b/docs/content/guide/concepts.ngdoc new file mode 100644 index 000000000000..77d8c4019564 --- /dev/null +++ b/docs/content/guide/concepts.ngdoc @@ -0,0 +1,467 @@ +@ngdoc overview +@name Conceptual Overview +@description + +# Overview + +This document gives a quick overview of the main angular components and how they work together. +These are: + + * {@link concepts#startup startup} - bring up hello world + * {@link concepts#runtime runtime} - overview of angular runtime + * {@link concepts#scope scope} - the glue between the view and the controller + * {@link concepts#controller controller} - application behavior + * {@link concepts#model model} - your application data + * {@link concepts#view view} - what the user sees + * {@link concepts#directives directives} - extend HTML vocabulary + * {@link concepts#filters filters} - format the data in user locale + * {@link concepts#injector injector} - assembles your application + * {@link concepts#module module} - configures the injector + * {@link concepts#angular_namespace `$`} - angular namespace + + +# Startup + +This is how we get the ball rolling (refer to the diagram and example below): + + + + 1. Browser loads the HTML and parses it into a DOM + 2. Browser loads `angular.js` script + 3. Angular waits for `DOMContentLoaded` event + 4. Angular looks for {@link api/ng.directive:ngApp ng-app} + {@link guide/directive directive}, which designates application boundary + 5. {@link guide/module Module} specified in {@link + api/ng.directive:ngApp ng-app} (if any) is used to configure + the {@link api/AUTO.$injector $injector} + 6. {@link api/AUTO.$injector $injector} is used to create the {@link + api/ng.$compile $compile} service as well as {@link + api/ng.$rootScope $rootScope} + 7. {@link api/ng.$compile $compile} service is used to compile the DOM and link + it with {@link api/ng.$rootScope $rootScope} + 8. {@link api/ng.directive:ngInit ng-init} {@link + guide/directive directive} assigns `World` to the `name` property on the {@link guide/scope + scope} + 9. The `{{name}}` {@link api/ng.$interpolate interpolates} the expression to + `Hello World!` + +
+
+ + +

Hello {{name}}!

+ + + + + +# Runtime + + + +The diagram and the example below describe how Angular interacts with browser's event loop. + + 1. Browsers event-loop waits for an event to arrive. Event is a user interactions, timer event, + or network event (response from a server). + 2. The events callback gets executed. This enters the JavaScript context. The callback can + modify the DOM structure. + 3. Once the callback finishes execution, the browser leaves the JavaScript context and + re-renders the view based on DOM changes. + +Angular modifies the normal JavaScript flow by providing it's own event processing loop. This +splits the JavaScript into classical and Angular execution context. Only operations which are +applied in Angular execution context will benefit from angular data-binding, exception handling, +property watching, etc... Use $apply() to enter Angular execution context from JavaScript. Keep in +mind that in most places (controllers, services) the $apply has already been called for you by the +directive which is handling the event. The need to call $apply is reserved only when +implementing custom event callbacks, or when working with a third-party library callbacks. + + 1. Enter Angular execution context by calling {@link guide/scope scope}`.`{@link + api/ng.$rootScope.Scope#$apply $apply}`(stimulusFn)`. Where `stimulusFn` is + the work you wish to do in Angular execution context. + 2. Angular executes the `stimulusFn()`, which typically modifies application state. + 3. Angular enters the {@link api/ng.$rootScope.Scope#$digest $digest} loop. The + loop is made up of two smaller loops which process {@link + api/ng.$rootScope.Scope#$evalAsync $evalAsync} queue and the {@link + api/ng.$rootScope.Scope#$watch $watch} list. The {@link + api/ng.$rootScope.Scope#$digest $digest} loop keeps iterating until the model + stabilizes, which means that the {@link api/ng.$rootScope.Scope#$evalAsync + $evalAsync} queue is empty and the {@link api/ng.$rootScope.Scope#$watch + $watch} list does not detect any changes. + 4. The {@link api/ng.$rootScope.Scope#$evalAsync $evalAsync} queue is used to + schedule work which needs to occur outside of current stack frame, but before the browser + view render. This is usually done with `setTimeout(0)`, but the `setTimeout(0)` approach + suffers from slowness and may cause view flickering since the browser renders the view after + each event. + 5. The {@link api/ng.$rootScope.Scope#$watch $watch} list is a set of expressions + which may have changed since last iteration. If a change is detected then the `$watch` + function is called which typically updates the DOM with the new value. + 6. Once Angular {@link api/ng.$rootScope.Scope#$digest $digest} loop finishes + the execution leaves the Angular and JavaScript context. This is followed by the browser + re-rendering the DOM to reflect any changes. + + +Here is the explanation of how the `Hello wold` example achieves the data-binding effect when the +user enters text into the text field. + + 1. During the compilation phase: + 1. the {@link api/ng.directive:ngModel ng-model} and {@link + api/ng.directive:input input} {@link guide/directive + directive} set up a `keydown` listener on the `` control. + 2. the {@link api/ng.$interpolate {{name}} } interpolation + sets up a {@link api/ng.$rootScope.Scope#$watch $watch} to be notified of + `name` changes. + 2. During the runtime phase: + 1. Pressing an '`X`' key causes the browser to emit a `keydown` event on the input control. + 2. The {@link api/ng.directive:input input} directive + captures the change to the input's value and calls {@link + api/ng.$rootScope.Scope#$apply $apply}`("name = 'X';")` to update the + application model inside the Angular execution context. + 3. Angular applies the `name = 'X';` to the model. + 4. The {@link api/ng.$rootScope.Scope#$digest $digest} loop begins + 5. The {@link api/ng.$rootScope.Scope#$watch $watch} list detects a change + on the `name` property and notifies the {@link api/ng.$interpolate + {{name}} } interpolation, which in turn updates the DOM. + 6. Angular exits the execution context, which in turn exits the `keydown` event and with it + the JavaScript execution context. + 7. The browser re-renders the view with update text. + +
+
+ + + +

Hello {{name}}!

+ + + + +#Scope + +The {@link guide/scope scope} is responsible for detecting changes to the model section and +provides the execution context for expressions. The scopes are nested in a hierarchical structure +which closely follow the DOM structure. (See individual directive documentation to see which +directives cause a creation of new scopes.) + +The following example demonstrates how `name` {@link guide/expression expression} will evaluate +into different value depending on which scope it is evaluated in. The example is followed by +a diagram depicting the scope boundaries. + +
+
+
+ + +
+ Hello {{name}}! +
+
+
    +
  1. {{name}}
    2. +
+
+ + + function GreetCtrl($scope) { + $scope.name = 'World'; + } + + function ListCtrl($scope) { + $scope.names = ['Igor', 'Misko', 'Vojta']; + } + + + .show-scope .doc-example-live.ng-scope, + .show-scope .doc-example-live .ng-scope { + border: 1px solid red; + margin: 3px; + } + + +
+ + + + + +# Controller + + + +Controller is the code behind the view. Its job is to construct the model and publish it to the +view along with callback methods. The view is a projection of the scope onto the template (the +HTML). The scope is the glue which marshals the model to the view and forwards the events to the +controller. + +The separation of the controller and the view is important because: + + * The controller is written in JavaScript. JavaScript is imperative. Imperative is a good fit + for specifying application behavior. The controller should not contain any rendering + information (DOM references or HTML fragments). + * The view template is written in HTML. HTML is declarative. Declarative is a good fit for + specifying UI. The View should not contain any behavior. + * Since the controller is unaware of the view, there could be many views for the same + controller. This is important for re-skinning, device specific views (i.e. mobile vs desktop), + and testability. + +
+
+ + +
+ Hello {{name}}! + +
+ + + function MyCtrl($scope) { + $scope.action = function() { + $scope.name = 'OK'; + } + + $scope.name = 'World'; + } + + + + + +# Model + + + +The model is the data which is used merged with the template to produce the view. To be able to +render the model into the view, the model has to be referenceable from the scope. Unlike many +other frameworks Angular makes no restrictions or requirements an the model. There are no classes +to inherit from or special accessor methods for accessing or changing the model. The model can be +primitive, object hash, or a full object Type. In short the model is a plain JavaScript object. + + +
+
+ + + +# View + + + +The view is what the users sees. The view begins its life as a template, it is merged with the +model and finally rendered into the browser DOM. Angular takes a very different approach to +rendering the view, to most other templating systems. + + * **Others** - Most templating systems begin as an HTML string with special templating markup. + Often the template markup breaks the HTML syntax which means that the template can not be + edited by an HTML editor. The template string is then parsed by the template engine, and + merged with the data. The result of the merge is an HTML string. The HTML string is then + written to the browser using the `.innerHTML`, which causes the browser to render the HTML. + When the model changes the whole process needs to be repeated. The granularity of the template + is the granularity of the DOM updates. The key here is that the templating system manipulates + strings. + * **Angular** - Angular is different, since its templating system works on DOM objects not on + strings. The template is still written in HTML string, but it is HTML (not HTML with + template sprinkled in.) The browser parses the HTML into DOM, and the DOM becomes the input to + the template engine know as the {@link api/ng.$compile compiler}. The compiler + looks for {@link guide/directive directives} which in turn set up {@link + api/ng.$rootScope.Scope#$watch watches} on the model. The result is a + continuously updating view which does not need template model re-merging. Your model becomes + the single source-of-truth for your view. + +
+
+ + + +
+
+
+ 
list={{list}}

+
    +
  1. + {{item}} +
    2. +
+
+ + + + + +# Directives + +A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, +element name, or a class name. A directive allows you to extend the HTML vocabulary in a +declarative fashion. Following is an example which enables data-binding for the `contenteditable` +in HTML. + + + + angular.module('directive', []).directive('contenteditable', function() { + return { + require: 'ngModel', + link: function(scope, elm, attrs, ctrl) { + // view -> model + elm.bind('blur', function() { + scope.$apply(function() { + ctrl.$setViewValue(elm.html()); + }); + }); + + // model -> view + ctrl.render = function(value) { + elm.html(value); + }; + + // load init value from DOM + ctrl.$setViewValue(elm.html()); + } + }; + }); + + +
Edit Me
+ 
model = {{content}}
+ + + div[contentEditable] { + cursor: pointer; + background-color: #D0D0D0; + margin-bottom: 1em; + padding: 1em; + } + + + + +# Filters + +{@link api/ng.$filter Filters} perform data transformation roles. Typically +they are used in conjunction with the locale to format the data in locale specific output. +They are follow the spirit of UNIX filters and follow similar syntax `|` (pipe). + + + +
+ Number formatting: {{ 1234567890 | number }}
+ array filtering + {{ list | filter:predicate | json }} +
+ + + + + + +# Modules and the Injector + + + +An {@link api/AUTO.$injector injector} is a service locator. There is a single +{@link api/AUTO.$injector injector} per Angular {@link +api/ng.directive:ngApp application}. The {@link +api/AUTO.$injector injector} provides a way to look up an object instance by its +name. The injector keeps on internal cache of all objects so that repeated calls to get the same +object name result in the same instance. If the object does not exist, then the {@link +api/AUTO.$injector injector} asks the instance factory to create a new instance. + +A {@link api/angular.Module module} is a way to configure the injector's instance factory, known +as a {@link api/AUTO.$provide provider}. + +
+
+  // Create a module
+  var myModule = angular.module('myModule', [])
+  
+  // Configure the injector
+  myModule.factory('serviceA', function() {
+    return {
+      // instead of {}, put your object creation here
+    };
+  });
+  
+  // create an injector and configure it from 'myModule'
+  var $injector = angular.injector('myModule');
+  
+  // retrieve an object from the injector by name
+  var serviceA = $injector.get('serviceA');
+  
+  // always true because of instance cache
+  $injector.get('serviceA') === $injector.get('serviceA');
+
+ + +But the real magic of the {@link api/AUTO.$injector injector} is that it can be +used to {@link api/AUTO.$injector#invoke call} methods and {@link +api/AUTO.$injector#instantiate instantiate} types. This subtle feature is what +allows the methods and types to ask for their dependencies rather then to look for them. + +
+  // You write functions such as this one.
+  function doSomething(serviceA, serviceB) {
+    // do something here.
+  }
+
+  // Angular provides the injector for your application
+  var $injector = ...;
+  
+  ///////////////////////////////////////////////
+  // the old-school way of getting dependencies.
+  var serviceA = $injector.get('serviceA');
+  var serviceB = $injector.get('serviceB');
+  
+  // now call the function
+  doSomething(serviceA, serviceB);
+
+  ///////////////////////////////////////////////
+  // the cool way of getting dependencies.
+  // the $injector will supply the arguments to the function automatically
+  $injector.invoke(doSomething); // This is how the framework calls your functions
+
+ +Notice that the only thing you needed to write was the function, and list the dependencies in the +function arguments. When angular calls the function, it will use the {@link +api/AUTO.$injector#invoke call} which will automatically fill the function +arguments. + +Examine the `ClockCtrl` bellow, and notice how it list the dependencies in constructor. When the +{@link api/ng.directive:ngController ng-controller} instantiates +the controller it automatically provides the dependencies. There is no need to create +dependencies, look for dependencies, or even get a reference to the injector. + + + +
+ Current time is: {{ time.now }} +
+ + + angular.module('timeExampleModule', []). + // Declare new object call time, + // which will be available for injection + factory('time', function($timeout) { + var time = {}; + + (function tick() { + time.now = new Date().toString(); + $timeout(tick, 1000); + })(); + return time; + }); + + // Notice that you can simply ask for time + // and it will be provided. No need to look for it. + function ClockCtrl($scope, time) { + $scope.time = time; + } + + + + + +# Angular Namespace + +To prevent accidental name collision, Angular prefixes names of objects which could potentially +collide with `$`. Please do not use the `$` prefix in your code as it may accidentally collide +with Angular code. diff --git a/docs/img/guide/concepts-controller.png b/docs/img/guide/concepts-controller.png new file mode 100644 index 000000000000..91f3e76fce97 Binary files /dev/null and b/docs/img/guide/concepts-controller.png differ diff --git a/docs/img/guide/concepts-directive.png b/docs/img/guide/concepts-directive.png new file mode 100644 index 000000000000..b77d5f8ec98e Binary files /dev/null and b/docs/img/guide/concepts-directive.png differ diff --git a/docs/img/guide/concepts-model.png b/docs/img/guide/concepts-model.png new file mode 100644 index 000000000000..ac6db0234b74 Binary files /dev/null and b/docs/img/guide/concepts-model.png differ diff --git a/docs/img/guide/concepts-module-injector.png b/docs/img/guide/concepts-module-injector.png new file mode 100644 index 000000000000..31fcf84c626e Binary files /dev/null and b/docs/img/guide/concepts-module-injector.png differ diff --git a/docs/img/guide/concepts-runtime.png b/docs/img/guide/concepts-runtime.png new file mode 100644 index 000000000000..eededc2ab617 Binary files /dev/null and b/docs/img/guide/concepts-runtime.png differ diff --git a/docs/img/guide/concepts-scope.png b/docs/img/guide/concepts-scope.png new file mode 100644 index 000000000000..83ad8f8f4329 Binary files /dev/null and b/docs/img/guide/concepts-scope.png differ diff --git a/docs/img/guide/concepts-startup.png b/docs/img/guide/concepts-startup.png new file mode 100644 index 000000000000..b896a2b51697 Binary files /dev/null and b/docs/img/guide/concepts-startup.png differ diff --git a/docs/img/guide/concepts-view.png b/docs/img/guide/concepts-view.png new file mode 100644 index 000000000000..0222544bee8f Binary files /dev/null and b/docs/img/guide/concepts-view.png differ diff --git a/docs/src/example.js b/docs/src/example.js index c85e1d0e6fb6..7477b0a5055c 100644 --- a/docs/src/example.js +++ b/docs/src/example.js @@ -58,10 +58,10 @@ exports.Example.prototype.addSource = function(name, content) { }; exports.Example.prototype.toHtml = function() { - return '

Source

\n' + + return '

Source

\n' + this.toHtmlEdit() + this.toHtmlTabs() + - '

Demo

\n' + + '

Demo

\n' + this.toHtmlEmbed(); }; diff --git a/docs/src/templates/css/docs.css b/docs/src/templates/css/docs.css index a262eb9c72f0..53478e33036d 100644 --- a/docs/src/templates/css/docs.css +++ b/docs/src/templates/css/docs.css @@ -145,6 +145,11 @@ ul.events > li > h3 { font-family: monospace; } +.center { + display: block; + margin: 2em auto; +} + .diagram { display: block; margin: 2em auto; @@ -175,3 +180,7 @@ ul.events > li > h3 { color: white; text-decoration: none; } + +.clear { + clear: both; +} diff --git a/images/docs/guide/concepts.graffle/data.plist b/images/docs/guide/concepts.graffle/data.plist new file mode 100644 index 000000000000..6d41005dd0ce --- /dev/null +++ b/images/docs/guide/concepts.graffle/data.plist @@ -0,0 +1,7483 @@ + + + + + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.7.0.167456 + + CreationDate + 2012-05-29 17:45:34 +0000 + Creator + Miško Hevery + GraphDocumentVersion + 8 + GuidesLocked + NO + GuidesVisible + YES + ImageCounter + 6 + ImageLinkBack + + + + + + ImageList + + image5.png + image4.png + image1.png + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2012-06-11 17:32:17 +0000 + Modifier + Miško Hevery + NotesVisible + NO + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + int + 0 + + NSLeftMargin + + float + 18 + + NSOrientation + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwGG + + NSPaperSize + + size + {792, 612} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + ReadOnly + NO + Sheets + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{221.69553292493575, 254.59980377079998}, {97, 52}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 36 + Line + + ID + 35 + Position + 0.64675337076187134 + RotationType + 0 + + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + CornerRadius + 21 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $compile\ +(dom)\ +($rootScope)} + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {-4.6196494000000001, 5.270823} + {15.333344, -15.333328} + {-15.333344, 15.333344} + {55.361164000000002, -1.9440409000000001} + + Head + + ID + 23 + + ID + 35 + Points + + {364.53793711326313, 239.04748078080075} + {340.66665999999998, 270.66665999999998} + {188.91623647527561, 280.41775098274513} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 19 + + + + Class + LineGraphic + ControlPoints + + {-4.6196494000000001, 5.270823} + {14, -14.000014999999999} + {-14, 13.999938999999999} + {55.361164000000002, -1.9440409000000001} + + Head + + ID + 23 + + ID + 34 + Points + + {288.65527031476449, 239.07689253799415} + {273.33334000000002, 274} + {188.91609530011533, 280.1261397624009} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 20 + + + + Class + LineGraphic + Head + + ID + 23 + + ID + 24 + Points + + {153.83330908590099, 162.25000499043261} + {153.83330228580456, 256.42209000956734} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 11 + + + + Bounds + {{118.99985, 256.67209000000003}, {69.666900999999996, 52}} + Class + ShapedGraphic + ID + 23 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Dynamic DOM\ +(view)} + + + + Class + LineGraphic + Head + + ID + 19 + + ID + 22 + Points + + {358.07618879185003, 200.71230346513886} + {366.25730425448791, 213.96852058039727} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 17 + + + + Class + LineGraphic + Head + + ID + 20 + + ID + 21 + Points + + {332.06290829918157, 200.64052389599567} + {312.43700525430683, 214.04030216562518} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 17 + + + + Bounds + {{259.33330999999998, 214.18127000000001}, {69.666900999999996, 24.666687}} + Class + ShapedGraphic + ID + 20 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $compile} + + + + Bounds + {{335.33292, 214.18127000000001}, {77.333709999999996, 24.666687}} + Class + ShapedGraphic + ID + 19 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $rootScope} + + + + Class + LineGraphic + Head + + ID + 17 + + ID + 18 + Points + + {350.33331838087867, 155.24999700731124} + {350.33332384389229, 175.58286999268989} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 16 + + + + Bounds + {{315.49988000000002, 175.83287000000001}, {69.666900999999996, 24.666687}} + Class + ShapedGraphic + ID + 17 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $injector} + + + + Bounds + {{288, 130.33331000000001}, {124.66663, 24.666687}} + Class + ShapedGraphic + ID + 16 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf0 ng-app="module"} + + + + Bounds + {{199.6730604614838, 109.66665631417833}, {53, 66}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 15 + Line + + ID + 14 + Position + 0.37696123123168945 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + a + 0.76 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 20 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 DOM \ +Content\ +Loaded\ +Event} + + Wrap + NO + + + Class + LineGraphic + Head + + ID + 16 + + ID + 14 + Points + + {188.91676100580287, 142.66665692489823} + {287.7499999941972, 142.66665530478485} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 11 + + + + Class + LineGraphic + Head + + ID + 11 + + ID + 13 + Points + + {153.83331176536166, 71.583305005698406} + {153.8333108050544, 123.08330999426786} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 10 + + + + Bounds + {{118.99986, 123.33331}, {69.666900999999996, 38.666694999999997}} + Class + ShapedGraphic + ID + 11 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Static\ +DOM} + + + + Bounds + {{130.16664, 46.666618}, {47.333343999999997, 24.666687}} + Class + ShapedGraphic + ID + 10 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 HTML} + + + + Bounds + {{247.99997999999999, 87.343902999999997}, {175.33328, 231.71102999999999}} + Class + ShapedGraphic + ID + 12 + Shape + Rectangle + Style + + fill + + Color + + b + 0.776995 + g + 0.949519 + r + 0.95338 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 AngularJS} + + TextPlacement + 0 + + + Bounds + {{100.16663599848334, 89.151024247068506}, {107.33334000000001, 231.71102999999999}} + Class + ShapedGraphic + ID + 26 + Line + + ID + 24 + Position + 0.45402556657791138 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + b + 0.939956 + g + 0.885521 + r + 0.800826 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Browser} + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + startup + UniqueID + 2 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Class + LineGraphic + Head + + ID + 49 + + ID + 80 + Points + + {354.68187999999998, 312.77929999999998} + {207.5833087461817, 311.9229422749425} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.5 + Legacy + + TailArrow + 0 + Width + 5 + + + Tail + + ID + 67 + Info + 3 + + + + Class + LineGraphic + Head + + ID + 48 + Info + 5 + + ID + 79 + Points + + {163.66665649999999, 273.75057998883068} + {163.66665649999999, 208.66666900000001} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.5 + Legacy + + TailArrow + 0 + Width + 5 + + + Tail + + ID + 49 + + + + Class + LineGraphic + Head + + ID + 74 + + ID + 78 + Points + + {207.58331300288879, 170.9999749003693} + {255.4427, 171.00005154608402} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.5 + Legacy + + TailArrow + 0 + Width + 5 + + + Tail + + ID + 48 + + + + Bounds + {{192.78892999999999, 208.66667000000001}, {67, 64}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 77 + Shape + Rectangle + Style + + fill + + Color + + a + 0.58 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 35 + Draws + NO + + + Text + + Pad + 10 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs36 \cf0 Event\ +Loop} + VerticalPad + 10 + + Wrap + NO + + + Class + LineGraphic + Head + + ID + 73 + + ID + 76 + Points + + {328.4427, 171.00005270188248} + {365.88547, 170.99999392379385} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.5 + Legacy + + TailArrow + 0 + Width + 5 + + + Tail + + ID + 74 + + + + Class + LineGraphic + Head + + ID + 64 + + ID + 75 + Points + + {380.48850637771721, 177.99996999999999} + {380.82794000000001, 201.06012999999999} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.5 + Legacy + + TailArrow + 0 + Width + 5 + + + Tail + + ID + 73 + + + + Bounds + {{255.4427, 164.00011000000001}, {73, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 74 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 3 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier-Bold;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qj + +\f0\b\fs24 \cf0 $apply(fn)} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{365.88547, 163.99996999999999}, {29, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 73 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 3 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier-Bold;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qj + +\f0\b\fs24 \cf0 fn()} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{352.68187999999998, 251.33327}, {51, 28}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 70 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $digest +\f1 \ +loop} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {-19.348541000000001, -7.4459533999999996} + {0.66674805000000004, 25.333328000000002} + {-0.66668700999999997, -25.333344} + {-21.811646, 8.8583221000000005} + + Head + + ID + 64 + Info + 3 + + ID + 69 + Points + + {354.68187999999998, 312.77929999999998} + {324.17426, 270.66665999999998} + {352.47829999999999, 227.14168000000001} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + Tail + + ID + 67 + Info + 3 + + + + Class + LineGraphic + ControlPoints + + {16.114532000000001, 7.2363128999999997} + {0, -16.666671999999998} + {0, 16.666687} + {21.244292999999999, -10.401427999999999} + + Head + + ID + 67 + Info + 1 + + ID + 68 + Points + + {403.88547, 226.76369} + {430, 264} + {406.08904999999999, 312.40143} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + Tail + + ID + 64 + Info + 1 + + + + Class + Group + Graphics + + + Bounds + {{354.68187999999998, 285.94170977282715}, {51.407170000000008, 51.029181047363267}} + Class + ShapedGraphic + ID + 66 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs22 \cf0 $watch +\f1 \ +list} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {14.741685, 0} + {0, -14.363766999999999} + {-1.7303201999999999e-05, 14.363559} + {12.85181, 0} + {-12.85181, 0} + {0, 11.717864000000001} + {0, -11.717779} + {-12.473799, -0.37798830999999999} + + ID + 67 + Points + + {383.03156000000001, 286.69769000000002} + {406.08904999999999, 312.40143} + {379.62952000000001, 336.97082999999998} + {354.68187999999998, 312.77929999999998} + {375.84955000000002, 285.94171} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + ID + 65 + + + Class + Group + Graphics + + + Bounds + {{347.66666800683606, 200.30412000000001}, {58.422381993163924, 51.029181047363267}} + Class + ShapedGraphic + ID + 63 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs20 \cf0 $eval\ +Async +\f1 \ +queue} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {14.741685, 0} + {0, -14.363766999999999} + {-1.7303200000000001e-05, 14.36356} + {12.85181, 0} + {-12.85181, 0} + {0, 11.717864000000001} + {0, -11.717779} + {-12.473799, -0.37798830999999999} + + ID + 64 + Points + + {380.82794000000001, 201.06012999999999} + {403.88547, 226.76369} + {377.42590000000001, 251.33330000000001} + {352.47829999999999, 227.14168000000001} + {373.64594, 200.30412000000001} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + ID + 62 + + + Bounds + {{120, 274.00058000000001}, {87.333313000000004, 75.333388999999997}} + Class + ShapedGraphic + ID + 49 + Shape + Rectangle + Style + + fill + + Color + + a + 0.6 + b + 0.357967 + g + 0.912217 + r + 0.971191 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 DOM Render} + + TextPlacement + 0 + + + Bounds + {{294.66663, 133.33328}, {150.66664, 217.33337}} + Class + ShapedGraphic + ID + 12 + Shape + Rectangle + Style + + fill + + Color + + a + 0.6 + b + 0.357967 + g + 0.912217 + r + 0.971191 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 3 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qj + +\f0\b\fs24 \cf0 AngularJS\ +} + + TextPlacement + 0 + + + Bounds + {{120, 133.33328}, {87.333313000000004, 75.333388999999997}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 48 + Magnets + + {1, 1} + {1, -1} + {-1, -1} + {-1, 1} + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.6 + b + 0.357967 + g + 0.912217 + r + 0.971191 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Event Queue\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc +\cf0 \ +(wait)} + + TextPlacement + 0 + + + Bounds + {{108, 97.937468999999993}, {112.66665999999999, 262.72919000000002}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Color + + b + 0.924687 + g + 0.924896 + r + 0.924755 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Native} + + TextPlacement + 0 + + + Bounds + {{233.33349999999999, 97.937468999999993}, {220.66651999999999, 262.72919000000002}} + Class + ShapedGraphic + ID + 72 + Shape + Rectangle + Style + + fill + + Color + + b + 0.939956 + g + 0.885521 + r + 0.800826 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 JavaScript} + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + runtime + UniqueID + 1 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{56.872748999999999, 105.99997}, {540.74390000000005, 41.36985}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 15 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope\ +name='Wold'} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{89.999984999999995, 231.70264}, {477.34658999999999, 37.283661000000002}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 12 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope\ +name='Misko'} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{89.999984999999995, 191.33336}, {477.34658999999999, 37.283661000000002}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 11 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope\ +name='Igor'} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{89.999984999999995, 271.81975999999997}, {477.34658999999999, 37.283661000000002}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 10 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope\ +name='Vojta'} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{57.403419, 149.95009999999999}, {540.74390000000005, 202.04990000000001}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 13 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope\ +names=[...]} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{23.272704999999998, 52.298842999999998}, {613.16918999999996, 335.03438999999997}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 16 + Layer + 0 + Shape + Rectangle + Style + + fill + + Color + + a + 0.1 + b + 0 + g + 0 + r + 0.501961 + + + shadow + + Beneath + YES + Draws + NO + Fuzziness + 32 + ShadowVector + {4, 4} + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{13.333394, 39.393920999999999}, {523, 343}} + Class + ShapedGraphic + ID + 17 + ImageID + 4 + Layer + 0 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{119.33362, 198.66747000000001}, {233.99968999999999, 35.166747999999998}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 8 + Layer + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{108.66672, 187.33354}, {291.33325000000002, 57.999907999999998}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 7 + Layer + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{108.66673, 150.16667000000001}, {291.33325000000002, 35.166747999999998}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 6 + Layer + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $scope} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{89.999984999999995, 79.333359000000002}, {419.33334000000002, 191.33344}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 5 + Layer + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Align + 2 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs22 \cf2 $rootScope} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{55.484786999999997, 58.666668000000001}, {465.03035999999997, 218.33340000000001}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0 + g + 0 + r + 1 + + Font + Courier + Size + 11 + + ID + 4 + ImageID + 1 + Layer + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 2 + VerticalPad + 0 + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Runtime + Print + YES + View + YES + + + Lock + NO + Name + Template + Print + YES + View + NO + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + scope + UniqueID + 3 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{458.00011999999998, 234.66667000000001}, {107.33301, 51.500076}} + Class + ShapedGraphic + ID + 25 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Declarative\ +view} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 53 + Points + + {141.66647, 130.74977000000001} + {334.99982, 270.16674999999998} + + Style + + stroke + + HeadArrow + 0 + Legacy + + Pattern + 2 + TailArrow + 0 + + + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 52 + Points + + {372.00006000000002, 130.50082} + {565.33312999999998, 269.91771999999997} + + Style + + stroke + + HeadArrow + 0 + Legacy + + Pattern + 2 + TailArrow + 0 + + + + + Class + LineGraphic + ControlPoints + + {-27.333313, 15.333313} + {21.333344, 22.666656} + {-21.333373999999999, -22.667099} + {-12, 28.333832000000001} + + ID + 43 + Points + + {477, 338} + {336.33334000000002, 328} + {324.66674999999998, 262.66672} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{362.00020999999998, 174.04151999999999}, {77.666320999999996, 51.500076}} + Class + ShapedGraphic + ID + 42 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 scope is the glue} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + Class + LineGraphic + ControlPoints + + {0, -20} + {6, 6.0000609999999996} + {-6.0000305000000003, -6.0001984000000004} + {40, 0.092437744000000002} + + ID + 41 + Points + + {422.33334000000002, 314.66665999999998} + {413.66665999999998, 258.66660000000002} + {366.66665999999998, 242.66663} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{143.33332999999999, 260.66665999999998}, {99.666672000000005, 54}} + Class + ShapedGraphic + HFlip + YES + ID + 40 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Imperative\ +behavior} + VerticalPad + 0 + + TextPlacement + 2 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + VFlip + YES + + + Class + LineGraphic + ControlPoints + + {11.333328, -2} + {0.66667175000000001, -4.5001220999999996} + {-0.66668700999999997, 4.5001525999999998} + {-10, 0.66667175000000001} + + ID + 39 + Points + + {239, 222} + {249.66666000000001, 235.16678999999999} + {265.66678000000002, 244.66663} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {-44.666656000000003, 4} + {-1.0004424999999999, -28} + {1.0003815, 28.000153000000001} + {-105.99997999999999, -2} + + ID + 37 + Points + + {206.99996999999999, 171.33332999999999} + {147.33376999999999, 211.33332999999999} + {265.66678000000002, 258.66660000000002} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {42, -16} + {5.3333740000000001, 21.333359000000002} + {-5.3333434999999998, -21.333344} + {18, -29.333328000000002} + + ID + 36 + Points + + {289.66665999999998, 215.33332999999999} + {347, 158.66667000000001} + {289, 149.33332999999999} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {0, -49.333312999999997} + {67.333313000000004, 45.333328000000002} + {-67.333281999999997, -45.333252000000002} + {22, -36.000008000000001} + + ID + 35 + Points + + {504.33334000000002, 296.16674999999998} + {435, 164} + {243, 144.66667000000001} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 33 + Points + + {143, 264.58319} + {336.33334000000002, 404.00011999999998} + + Style + + stroke + + HeadArrow + 0 + Legacy + + Pattern + 2 + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{329.33404999999999, 263.74939000000001}, {240.33333999999999, 142.75953999999999}} + Class + ShapedGraphic + ID + 30 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fmodern\fcharset0 Courier;\f2\fmodern\fcharset0 Courier-Bold; +} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 View (DOM)\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f1\b0 \cf0 \ +<div ng-controller=" +\f2\b MyCtrl +\f1\b0 ">\ + Hello \{\{ +\f2\b name +\f1\b0 \}\}!\ + <button ng-click=" +\f2\b action() +\f1\b0 ">\ + OK\ + <button>\ +</div>} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{245.83349999999999, 203.78686999999999}, {240.33333999999999, 142.75953999999999}} + Class + ShapedGraphic + ID + 29 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.645653 + g + 0.647534 + r + 0.842549 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Scope\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f1\b0 \cf0 \{\ + name: 'world',\ + action: function\ +\}} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{137.66666000000001, 126.49046}, {240.33333999999999, 142.75953999999999}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.999729 + g + 0.880029 + r + 0.693677 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fmodern\fcharset0 Courier;\f2\fmodern\fcharset0 Courier-Bold; +} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Controller\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f1\b0 \cf0 function +\f2\b MyCtrl +\f1\b0 ($scope) \{\ + $scope.action \ + = function() \{\ + // do something;\ + \};\ + $scope.name\ + = 'world';\ +\}} + + TextPlacement + 0 + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 51 + Points + + {373.33337, 262.00002999999998} + {566.66656, 401.41696000000002} + + Style + + stroke + + HeadArrow + 0 + Legacy + + Pattern + 2 + TailArrow + 0 + + + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + controller + UniqueID + 4 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{518.66638, 270}, {77.666320999999996, 51.500076}} + Class + ShapedGraphic + ID + 44 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Type} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + Bounds + {{518.66638, 191.91701}, {77.666320999999996, 51.500076}} + Class + ShapedGraphic + ID + 43 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 object hash} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + Bounds + {{523.33349999999996, 123.3335}, {77.666320999999996, 51.500076}} + Class + ShapedGraphic + ID + 42 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 primitive} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + Class + LineGraphic + ControlPoints + + {23.333328000000002, 1.3332824999999999} + {-5.9994202000000003, -7.3333434999999998} + {5.9996033000000004, 7.3334351} + {-29.333344, -0.66665649000000005} + + ID + 39 + Points + + {279.66665999999998, 301.99139000000002} + {313.66608000000002, 308.33334000000002} + {343.99991, 314.33334000000002} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {41.666992, -2} + {0, 18.666687} + {3.0517578e-05, -18.666733000000001} + {-27.666564999999999, 0} + + ID + 38 + Points + + {270.66635000000002, 288.33334000000002} + {321.66665999999998, 270} + {345.33321999999998, 233.00008} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {23.333328000000002, 1.3332824999999999} + {0.66665649000000005, 32.000014999999998} + {-0.66659546000000003, -32} + {-29.333344, -0.66665649000000005} + + ID + 37 + Points + + {264.33330999999998, 273.66714000000002} + {308.33334000000002, 228.33332999999999} + {344.33334000000002, 191.91701} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ControlPoints + + {23.333328000000002, 1.3332824999999999} + {6.1035156000000001e-05, 38.000014999999998} + {0, -38} + {-29.333344, -0.66665649000000005} + + ID + 36 + Points + + {257, 260.33339999999998} + {298.33334000000002, 219.63582} + {344.66656, 179.00002000000001} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + AllowConnections + NO + Bounds + {{339.33330999999998, 166.28026}, {235.66668999999999, 39.675384999999999}} + Class + ShapedGraphic + ID + 32 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 'world': string\ +123: number} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{339.33330999999998, 219.63582}, {235.66668999999999, 68.675385000000006}} + Class + ShapedGraphic + ID + 31 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 \{\ + firstName: 'John',\ + lastName: 'Smith'\ +\}} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{339.33330999999998, 301.99139000000002}, {235.66668999999999, 93.675262000000004}} + Class + ShapedGraphic + ID + 30 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 function Address() \{\ + this.street = '123 Main St.';\ + this.city = 'Anytown';\ + this.state = 'CA';\ + this.zip = '00000';\ +\}} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{199.99997999999999, 219.74034}, {113.66609, 113.5193}} + Class + ShapedGraphic + ID + 29 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.645653 + g + 0.647534 + r + 0.842549 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Scope\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f1\b0 \cf0 \{\ + name: \ + value: \ + person:\ + address:\ +\}} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{327.33325000000002, 139.66677999999999}, {258.33344, 266.66656}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Color + + a + 0.48 + b + 0.939956 + g + 0.885521 + r + 0.800826 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 5 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Model} + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + model + UniqueID + 5 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{300.66669000000002, 340.03136999999998}, {61, 38}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 41 + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 set up\ +$watches} + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {15.499756, 0.66665649000000005} + {-7.5411682000000004, 10} + {7.5412597999999997, -10.000092} + {13.333344, 10.666656} + + ID + 40 + Points + + {279.50021000000004, 367.01561599999997} + {311.52454, 355} + {316.99997000000002, 310.34897000000001} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 31 + + + + Bounds + {{246.20776000000001, 278.38180999999997}, {73, 38}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 39 + Line + + ID + 38 + Offset + 20.66729736328125 + Position + 0.50800865888595581 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red0\green79\blue177;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 continuous\ +update loop} + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {-42.666656000000003, 2.2348633000000002} + {-47.333252000000002, 0} + {47.333343999999997, 0} + {33.999786, 0} + + ID + 38 + Points + + {273.00018, 279.14175} + {284.33328, 318.06815} + {298.33353, 279.14175} + + Style + + stroke + + Bezier + + Color + + b + 0.501961 + g + 0.25098 + r + 0 + + HeadArrow + 0 + HeadScale + 0.60000002384185791 + Legacy + + LineType + 1 + TailArrow + FilledArrow + TailScale + 0.60000002384185791 + Width + 3 + + + + + Bounds + {{202.66733691285987, 324.41827307666819}, {51.333343999999997, 12}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 35 + Line + + ID + 34 + Offset + -20.66619873046875 + Position + 0.7042233943939209 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs20 \cf0 extract} + VerticalPad + 0 + + + + Class + LineGraphic + Head + + ID + 31 + + ID + 34 + Points + + {249.00020203225841, 286.93294200708601} + {249.00021000000001, 348.68227999999999} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 19 + + + + Bounds + {{218.50021000000001, 348.68227999999999}, {61, 36.666671999999998}} + Class + ShapedGraphic + ID + 31 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 directives} + + + + Bounds + {{473.35338999999999, 262.78985999999998}, {47, 38}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 30 + Line + + ID + 29 + Offset + 20.0006103515625 + Position + 0.52536952495574951 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red0\green79\blue177;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 update\ +Loop} + + Wrap + NO + + + Class + LineGraphic + ControlPoints + + {2, 25.666656} + {-13.333313, 137.99997999999999} + {13.333435, -138.00002000000001} + {18.666656, -31} + + ID + 29 + Points + + {428.66665999999998, 396.98446999999999} + {518.00043000000005, 272.65114999999997} + {484.66701999999998, 164.31778} + + Style + + stroke + + Bezier + + Color + + b + 0.503272 + g + 0.249429 + r + 0 + + HeadArrow + FilledArrow + HeadScale + 0.59999990463256836 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + + + Class + LineGraphic + Head + + ID + 12 + + ID + 27 + Points + + {461.3742093539816, 201.15045614754578} + {442.62579427338341, 230.15180582409283} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 11 + + + + Bounds + {{201.33285861328125, 203.41861197395929}, {51.333343999999997, 24}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 26 + Line + + ID + 25 + Offset + -22.00067138671875 + Position + 0.31356492638587952 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs20 \cf0 Browser\ +parse} + VerticalPad + 0 + + + + Class + LineGraphic + Head + + ID + 19 + + ID + 25 + Points + + {249.000202, 199.61433199312916} + {249.000202, 250.01627000000002} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 15 + + + + Bounds + {{429.00009, 330.46026999999998}, {61, 12}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 24 + Shape + Rectangle + Style + + fill + + Color + + a + 0.51 + b + 1 + g + 1 + r + 1 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs20 \cf0 .innerHTML} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + Head + + ID + 14 + + ID + 23 + Points + + {430.66652522105335, 323.90126201100804} + {430.66641471881627, 360.06783998899249} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 13 + + + + Class + LineGraphic + Head + + ID + 13 + + ID + 22 + Points + + {430.66657944385747, 267.23448199101415} + {430.6665767616127, 286.73459000898441} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 12 + + + + Class + LineGraphic + Head + + ID + 12 + + ID + 20 + Points + + {416.17475093036813, 201.22353979937509} + {424.99164897661751, 230.07872220072352} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + Tail + + ID + 10 + + + + Bounds + {{223.33353, 250.01626999999999}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 19 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 DOM} + + + + Bounds + {{295.33132999999998, 250.01626999999999}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 16 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.999729 + g + 0.880029 + r + 0.693677 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Model} + + + + Bounds + {{223.33353, 162.69766000000001}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 15 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 HTML\ +(string)} + + + + Bounds + {{404.99991, 360.31783999999999}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 14 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 DOM} + + + + Bounds + {{404.99991, 286.98459000000003}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 13 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 HTML\ +(string)} + + + + Bounds + {{404.99991, 230.31781000000001}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 12 + Shape + Rectangle + Style + + fill + + Color + + a + 0.19 + b + 0 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 merge} + + + + Bounds + {{447.66674999999998, 164.31778}, {51.333343999999997, 36.666671999999998}} + Class + ShapedGraphic + ID + 11 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.999729 + g + 0.880029 + r + 0.693677 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Model} + + + + Bounds + {{379.99982, 164.31778}, {61, 36.666671999999998}} + Class + ShapedGraphic + ID + 10 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 template\ +(string)} + + + + Bounds + {{218.50021000000001, 235.68222}, {135.83308, 88.000031000000007}} + Class + ShapedGraphic + ID + 37 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.645653 + g + 0.647534 + r + 0.842549 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 scope} + VerticalPad + 2 + + TextPlacement + 0 + + + Bounds + {{199.83366520855361, 244.16281983155915}, {83.665970000000002, 167.76999000000001}} + Class + ShapedGraphic + ID + 17 + Line + + ID + 34 + Offset + -7.33355712890625 + Position + 0.66583502292633057 + RotationType + 0 + + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + fill + + Color + + a + 0.19 + b + 0 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 $compile} + + TextPlacement + 2 + + + Bounds + {{374.33344, 135.68231}, {154.66663, 281.63544000000002}} + Class + ShapedGraphic + ID + 43 + Shape + Rectangle + Style + + fill + + Color + + b + 0.924687 + g + 0.924896 + r + 0.924755 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Others} + + TextPlacement + 0 + + + Bounds + {{195, 135.68225000000001}, {166.66668999999999, 281.63549999999998}} + Class + ShapedGraphic + ID + 42 + Shape + Rectangle + Style + + fill + + Color + + b + 0.924687 + g + 0.924896 + r + 0.924755 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 AngularJS} + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + view + UniqueID + 6 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Bounds + {{59.333323160807254, 139.33333333333317}, {131.33367919921875, 51.500076}} + Class + ShapedGraphic + HFlip + YES + ID + 44 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 I change visibility based on model} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + AllowConnections + NO + Bounds + {{149.3333333333336, 188.45437333333504}, {55, 15.77281379699707}} + Class + ShapedGraphic + ID + 43 + Shape + Rectangle + Style + + fill + + Color + + a + 0.26 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 5 + Width + 0.5 + + + Text + + Align + 0 + + TextPlacement + 0 + + + Bounds + {{250.66733333333337, 121.33366666666642}, {148.33299255371094, 51.500076}} + Class + ShapedGraphic + ID + 42 + Shape + Speech Bubble + Style + + fill + + Color + + b + 0.566522 + g + 0.917039 + r + 0.952309 + + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 I bind checkbox state to a model} + VerticalPad + 0 + + TextPlacement + 0 + TextRelativeArea + {{0.15000000999999999, 0.15000000999999999}, {0.69999999000000002, 0.69999999000000002}} + + + AllowConnections + NO + Bounds + {{233.33333333333337, 170.5605199999998}, {61, 15.77281379699707}} + Class + ShapedGraphic + ID + 32 + Shape + Rectangle + Style + + fill + + Color + + a + 0.26 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 5 + Width + 0.5 + + + Text + + Align + 0 + + TextPlacement + 0 + + + Bounds + {{46.000000000000007, 61.333333333333186}, {616, 183}} + Class + ShapedGraphic + ID + 3 + ImageID + 5 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + directive + UniqueID + 7 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + filter + UniqueID + 8 + VPages + 1 + + + ActiveLayerIndex + 0 + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {756, 553}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + DisplayScale + 1 0/72 in = 1.0000 in + GraphicsList + + + Class + LineGraphic + ControlPoints + + {9.1668091, 17.667358} + {-11.054474000000001, -0.27786254999999999} + {11.054474000000001, 0.27786254999999999} + {-13.833405000000001, 21.333328000000002} + + ID + 57 + Points + + {308.49991, 121.33264} + {341.16672, 143.66667000000001} + {374.83346999999998, 123} + + Style + + stroke + + Bezier + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{451.30468999999999, 178.43733}, {60, 24}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 56 + Line + + ID + 55 + Offset + 21.99981689453125 + Position + 0.6844744086265564 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 configure} + + Wrap + NO + + + Class + LineGraphic + ID + 55 + Points + + {438.24997000000002, 173} + {476.41640999999998, 218.99904000000001} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{371.66663, 110.66663}, {155.06540000000001, 62.333373999999999}} + Class + ShapedGraphic + ID + 29 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.645653 + g + 0.647534 + r + 0.842549 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 myModule\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f1\b0 \cf0 $provide.\ + factory('objA', \'85)} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{407.41640999999998, 287.73297000000002}, {69, 38}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 53 + Line + + ID + 52 + Offset + 12.66705322265625 + Position + 0.450248122215271 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 if no cache\ +create new} + + Wrap + NO + + + Class + LineGraphic + ID + 52 + Points + + {409.16663, 319.31805000000003} + {481.83330999999998, 319.50006000000002} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{351.73212000000001, 266.65176000000002}, {43, 38}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 51 + Line + + ID + 50 + Offset + 12.66705322265625 + Position + 0.450248122215271 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 check\ +cache} + + Wrap + NO + + + Class + LineGraphic + ID + 50 + Points + + {344.5, 298.16854999999998} + {408.16669000000002, 298.50186000000002} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{234.82828000000001, 263.16644000000002}, {94, 24}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Color + + w + 0 + + Font + Helvetica + Size + 12 + + ID + 49 + Line + + ID + 48 + Offset + 8.000244140625 + Position + 0.450248122215271 + RotationType + 0 + + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 $injector.get('a')} + + Wrap + NO + + + Class + LineGraphic + ID + 48 + Points + + {230.5, 283.16669000000002} + {344.5, 283.16669000000002} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + + + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 47 + Points + + {483.49993999999998, 256.33328} + {483.49993999999998, 342.16656} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 46 + Points + + {408.49993999999998, 256.33328} + {408.49993999999998, 342.16656} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 45 + Points + + {344.5, 245.83340000000001} + {344.5, 342.16660000000002} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + AllowConnections + NO + Bounds + {{378.16674999999998, 219.65106}, {61, 36.666671999999998}} + Class + ShapedGraphic + ID + 11 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.999729 + g + 0.880029 + r + 0.693677 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Instance\ +Cache} + + + + AllowConnections + NO + Bounds + {{451.16663, 219.65106}, {61, 36.666671999999998}} + Class + ShapedGraphic + ID + 10 + Shape + Rectangle + Style + + fill + + Color + + a + 0.75 + b + 0.633471 + g + 0.837918 + r + 0.691869 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 Instance\ +Factory} + + + + AllowConnections + NO + Bounds + {{314.16669000000002, 210.83340000000001}, {211.33332999999999, 55.333328000000002}} + Class + ShapedGraphic + ID + 12 + Shape + Rectangle + Style + + fill + + Color + + a + 0.19 + b + 0 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 $injector} + + + + AllowConnections + NO + Bounds + {{221.66668999999999, 103}, {312.66663, 254}} + Class + ShapedGraphic + ID + 42 + Shape + Rectangle + Style + + fill + + Color + + b + 0.924687 + g + 0.924896 + r + 0.924755 + + + shadow + + Draws + NO + + stroke + + CornerRadius + 15 + Pattern + 1 + Width + 0.5 + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf470 +{\fonttbl\f0\fmodern\fcharset0 Courier;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf0 ng-app="myModule"} + + TextPlacement + 0 + + + GridInfo + + HPages + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + Orientation + 2 + PrintOnePage + + RowAlign + 1 + RowSpacing + 36 + SheetTitle + injector-module + UniqueID + 9 + VPages + 1 + + + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UseEntirePage + + WindowInfo + + CurrentSheet + 6 + ExpandedCanvases + + Frame + {{144, 431}, {1363, 1081}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-31, -37}, {818.66666666666663, 628}} + Zoom + 1.5 + ZoomValues + + + runtime + 1.5 + 1 + + + startup + 1 + 1 + + + scope + 1.5 + 1 + + + controller + 1.5 + 1 + + + model + 1.5 + 1 + + + view + 1.5 + 1 + + + directive + 1.5 + 1 + + + filter + 1.5 + 1 + + + injector-module + 1.5 + 1 + + + + + diff --git a/images/docs/guide/concepts.graffle/image1.png b/images/docs/guide/concepts.graffle/image1.png new file mode 100644 index 000000000000..ae8d209e64f6 Binary files /dev/null and b/images/docs/guide/concepts.graffle/image1.png differ diff --git a/images/docs/guide/concepts.graffle/image4.png b/images/docs/guide/concepts.graffle/image4.png new file mode 100644 index 000000000000..83cebe66cd58 Binary files /dev/null and b/images/docs/guide/concepts.graffle/image4.png differ diff --git a/images/docs/guide/concepts.graffle/image5.png b/images/docs/guide/concepts.graffle/image5.png new file mode 100644 index 000000000000..696cb3de2a89 Binary files /dev/null and b/images/docs/guide/concepts.graffle/image5.png differ