Benx Blog

八月 29, 2014

Diigo Diary 08/29/2014

Filed under: Diigo Diary — benxshen @ 8:30 上午
    • What are Scopes?

       

      scope is an object that refers to the application model.

    • Scopes can watch expressions and propagate events.
      • Scope characteristics

         

           

        • Scopes provide APIs ($watch) to observe model mutations.

           

        •  

        • Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm" (controllers, services, Angular event handlers).

    • Scope as Data-Model

       

      Scope is the glue between application controller and the view.

    • During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.
    • When Angular evaluates {{name}}, it first looks at the scope associated with the given element for the name property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behavior is known as prototypical inheritance, and child scopes prototypically inherit from their parents.
    • Scopes are attached to the DOM as $scope data property, and can be retrieved for debugging purposes.
    • Scope Events Propagation

       

      Scopes can propagate events in similar fashion to DOM events. The event can be broadcasted to the scope children or emitted to scope parents.

    • When the browser calls into JavaScript the code executes outside the Angular execution context, which means that Angular is unaware of model modifications. To properly process model modifications the execution has to enter the Angular execution context using the $apply method. Only model modifications which execute inside the $apply method will be properly accounted for by Angular.
    • After evaluating the expression, the $apply method performs a $digest.
      • Creation

         

        The root scope is created during the application bootstrap by the $injector. During template linking, some directives create new child scopes.

         

      •  

      • Watcher registration

         

        During template linking directives register watches on the scope. These watches will be used to propagate model values to the DOM.

         

      •  

      • Model mutation

         

        For mutations to be properly observed, you should make them only within the scope.$apply(). (Angular APIs do this implicitly, so no extra $apply call is needed when doing synchronous work in controllers, or asynchronous work with $http, $timeout or $interval services.

         

      •  

      • Mutation observation

         

        At the end of $apply, Angular performs a $digest cycle on the root scope, which then propagates throughout all child scopes. During the $digest cycle, all $watched expressions or functions are checked for model mutation and if a mutation is detected, the $watch listener is called.

         

      •  

      • Scope destruction

         

        When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via scope.$destroy() API. This will stop propagation of $digest calls into the child scope and allow for memory used by the child scope models to be reclaimed by the garbage collector.

      • Scopes and Directives

         

        During the compilation phase, the compiler matches directives against the DOM template. The directives usually fall into one of two categories:

         

           

        • Observing directives, such as double-curly expressions {{expression}}, register listeners using the $watch() method. This type of directive needs to be notified whenever the expression changes so that it can update the view.

           

        •  

        • Listener directives, such as ng-click, register a listener with the DOM. When the DOM listener fires, the directive executes the associated expression and updates the view using the $apply() method.

           

        •  

         

        When an external event (such as a user action, timer or XHR) is received, the associated expression must be applied to the scope through the $apply() method so that all listeners are updated correctly.

    • You can also use $apply() to enter the Angular execution context from JavaScript. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.
    • The $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.
      • Here is the explanation of how the Hello world example achieves the data-binding effect when the user enters text into the text field.

         

           

        1. During the compilation phase:
             

          1. the ng-model and input directive set up a keydown listener on the <input> control.
          2.  

          3. the interpolation sets up a $watch to be notified of name changes.
          4.  

           

        2.  

        3. During the runtime phase:
             

          1. Pressing an ‘X‘ key causes the browser to emit a keydown event on the input control.
          2.  

          3. The input directive captures the change to the input’s value and calls $apply("name = 'X';") to update the application model inside the Angular execution context.
          4.  

          5. Angular applies the name = 'X'; to the model.
          6.  

          7. The $digest loop begins
          8.  

          9. The $watch list detects a change on the name property and notifies the interpolation, which in turn updates the DOM.
          10.  

          11. Angular exits the execution context, which in turn exits the keydown event and with it the JavaScript execution context.
          12.  

          13. The browser re-renders the view with update text.
    • When Angular compiles the HTML, it processes the ng-controller directive, which in turn asks the injector to create an instance of the controller and its dependencies.

       

      injector.instantiate(MyController);
    • When Angular compiles the HTML, it processes the ng-controller directive, which in turn asks the injector to create an instance of the controller and its dependencies.

       

      injector.instantiate(MyController);
      • The injector needs to know what services to inject into the function. There are three equivalent ways of annotating your code with service name information:

         

           

        • Implicitly from the function parameter names
        •  

        • Using the $inject property annotation
        •  

        • Using the inline array annotation
        •  

         

        These can be used interchangeably as you see fit and are equivalent.

      • Moreover, additional dependencies are made available to Controllers:

         

           

        • $scope: Controllers are always associated with a point in the DOM and so are provided with access to the scope at that point. Other components, such as services only have access to the singleton $rootScope service.
        •  

        • $route resolves: If a controller is instantiated as part of a route, then any values that are resolved as part of the route are made available for injection into the controller.
  • tags: angular howto jquery plugin

    • In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope.
    • When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller’s constructor function. A new child scope will be available as an injectable parameter to the Controller’s constructor function as $scope.
    • Since ng-model does not do a deep watch, $render() is only invoked if the values of $modelValue and $viewValue are actually different to their previous value. If $modelValue or $viewValue are objects (rather than a string or number) then $render() will not be invoked if you only change a property on the objects.

Posted from Diigo. The rest of my favorite links are here.

發表迴響 »

仍無迴響。

RSS feed for comments on this post. TrackBack URI

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

在WordPress.com寫網誌.

%d 位部落客按了讚: