Angularjs Handouts-scope

<span id="Label3"></p><p><p><strong>What is a scope?</strong></p></p><p><p>Angular scope (scope) is the template and the context of the work, where the application model and view-related callback behaviors are stored in the Scope. A scope is a hierarchical structure that corresponds to the associated DOM Structure. Scopes allow you to observe expressions and propagate events.</p></p><p><p><strong>original: </strong>Scope is a object that refers to the application Model. It is a execution context for Expressions. Scopes is arranged in hierarchical structure which mimic the DOM structure of the Application. Scopes can watch expressions and propagate Events.</p></p><p><p><strong>Scope properties</strong></p></p><p><p><strong></strong> scopes provide relevant APIs ($watch) to monitor the state of the model and synchronize changes to the model within the angular system (views, services, event Handlers) to the VIEW.</p></p><p><p>Scopes can be nested to control the application Component's access to model Properties. Nested scopes can be "parent-child" relationships or "sibling" relationships. Child scopes can inherit the properties of the parent scope, and the adjacent scopes are complementary and visible.</p></p><p><p>The scope provides the context of the Expression. For example, the expression {{username}} is meaningful only if the scope of the username attribute is Defined.</p></p><p><p><strong>Scopes as data models</strong></p></p><p><p><strong></strong> The scope is the middle zone that connects the angular controller and VIEW. The directive establishes a monitoring ($watch) service for the expression in the scope at the template link stage (linking). This allows the $watch to update the view by notifying the instruction of changes in the Model's properties in a timely manner.</p></p><p><p>controllers and directives can only be connected by scope and cannot be directly correlated. This enables decoupling of the controller and the VIEW. This enables a set of models to bind multiple views and improve the testability of the front-end Code.</p></p><p><p>Index.html</p></p>HTML code<pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Ng-controller</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "mycontroller"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #000000;"><span style="color: #000000;">Your name:</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">input</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Ng-model</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "username"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Ng-click</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= ' SayHello () '</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Greet<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">HR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #000000;"><span style="color: #000000;">{{greeting}}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> </pre><p><p></p></p><p><p>Script.js</p></p>JS Code<pre><pre><span style="color: #0000ff;">1 angular.module (' scopeexample ', []) 2. Controller (' mycontroller ', [' $scope ', function ($scope) { 3 $ Scope.username = ' World '; 5 $scope. SayHello = function () { 6 $scope. greeting = ' Hello ' + $scope. username + '! '; 7 }; 8}]); </span></pre></pre><p><p>The above example illustrates how scopes work:</p></p><p><p>1. The username attribute is defined in the Mycontroller controller and is bound in the input text Control. Username is initialized to ' world ' so that the scope notifies the text box and pre-fills the initial value in the text box.</p></p><p><p>2. The same controller defines the SayHello behavior in the scope and registers the Click event with the button via the Ng-click. When a user enters another value in input, the Username property is updated through the scope, altering the results of the Sayhello.</p></p><p><p>Operation Result:</p></p><p><p></p></p><p><p>The {{greeting}} expression works as Follows:</p></p><p><p>1. First locate the dom-related scope of the {{greeting}} Expression. In this example, $scope is in Mycontroller.</p></p><p><p>2. Locate the Greeting property in the scope and replace {{greeting}}, quantitation updated the VIEW.</p></p><p><p>Scope and its properties provide the data used to represent the VIEW. (original: the scope is the "the" and "the" Source-of-truth for all things view related.)</p></p><p><p>From a test perspective, it is necessary to detach the view from the controller so that we can test the behavior behind the view individually without regard to the details of the VIEW.</p></p>JS Code<pre><span style="color: #008080;"><span style="color: #008080;">1</span></span>It (' should say hello ',<span style="color: #0000ff;"><span style="color: #0000ff;">function</span></span><span style="color: #000000;"><span style="color: #000000;">() { </span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Scopemock =<span style="color: #000000;"><span style="color: #000000;"> {}; </span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">var</span></span>Cntl =<span style="color: #0000ff;"><span style="color: #0000ff;">New</span></span><span style="color: #000000;"><span style="color: #000000;">Mycontroller (scopemock);</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Assert that username is pre-filled</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span>Expect (scopemock.username). toequal (' World '<span style="color: #000000;"><span style="color: #000000;">); </span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Assert that we read new username and greet</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span>Scopemock.username = ' angular '<span style="color: #000000;"><span style="color: #000000;">; </span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #000000;"><span style="color: #000000;">Scopemock.sayhello (); </span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span>Expect (scopemock.greeting). toequal (' Hello angular! '<span style="color: #000000;"><span style="color: #000000;">); </span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span>});</pre><p><p><strong>Hierarchical structure of scopes</strong></p></p><p><p><strong></strong> Each angular application has a root scope (root Scope) and can have multiple child scopes under the root scope. Some directives (directives) also create Sub-scopes. The new scope is added to the corresponding parent scope, which forms a tree structure that is parallel to the DOM View.</p></p><p><p>Let's take a concrete example to understand:</p></p>HTML code<pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "show-scope-demo"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Ng-controller</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "greetcontroller"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #000000;"><span style="color: #000000;">Hello {{name}}! </span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Ng-controller</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "listcontroller"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">ol</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ng-repeat</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "name in names"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>{{name}} from {{department}}<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Li</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">ol</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> </pre>JS Code<pre><pre><span style="color: #0000ff;">1 angular.module (' scopeexample ', []) 2. Controller (' greetcontroller ', [' $scope ', ' $rootScope ', function ($scope, $rootScope) { 3 $scope. name = ' World '; 4 $rootScope. department = ' Angular '; 5}]) 6. Controller (' listcontroller ', [' $scope ', function ($scope) { 7 $scope. names = [' Igor ', ' Misko ', ' Vojta ']; </span></pre></pre>CSS Code<pre><pre><span style="color: #008080;">1</span> <span style="color: #800000;">. show-scope-demo.ng-scope, </span> <span style="color: #008080;">2</span> <span style="color: #800000;">. show-scope-demo. Ng-scope </span> { <span style="color: #008080;">3</span><span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid red</span>; <span style="color: #008080;">4</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 3px</span>; <span style="color: #008080;">5</span> } <span style="color: #008080;">6</span> </pre></pre><p><p>Output:<br><br>The corresponding Dom Structure:</p></p><p><p><br><br>We can notice that angular automatically adds the "ng-close" class to the DOM element of the bound scope, and the CSS file highlights the elements of the Ng-scope class. Creating a child scope for <li> is necessary because each <li> has a {{name}} expression pointing to its own name Property. Department in {{department}} inherits the Root-scope $rootscope.department Property.</p></p><p><p><strong>Get the scope of the DOM</strong></p></p><p><p><strong></strong> The scope is associated with the view, and we can get the scope bound to the view through the API at debug Time. The root scope (root Scope) is defined on the DOM element that contains the Ng-app Directive. Usually the Ng-app is placed in the