Use several pieces of code to clarify the concepts and associations of $ injector, $ rootScope, and $ scope in angularJS.

Use several pieces of code to clarify the concepts and associations of $ injector, $ rootScope, and $ scope in angularJS.

$ Injector, $ rootScope, and $ scope are important in the angularJS framework. clarifying the relationship between them is very useful for us to learn and understand the angularJS framework in the future.

1,$ Injector is actually an IOC container, Contains a lot of services (similar to beans in the spring framework), other code can get the required services from injector in the way of $ injector. get ("serviceName. For more information, seeThis article

2,Scope is the scope in angularJS (actually the place where data is stored). It is similar to the javascript prototype chain.. When searching, first find your own scope. If not, search up the scope chain until it reaches the root scope rootScope.

3. $ rootScope is automatically created when angularJS loads a module. Each module has only one rootScope. After rootScope is created, it will be added to $ injector as a service. That is to say, you can get the root scope of a module through $ injector. get ("$ rootScope. More accurately, $ rootScope is created by the core module ng of angularJS.

Example 1:

// Create a module var module = angular. module ("app", []); // true indicates that $ rootScope is indeed included in the module's injector as a service. var hasNgInjector = angular. injector (['app', 'ng ']); console. log ("has $ rootScope =" + hasNgInjector. has ("$ rootScope"); // true // gets the injector object of the module, and does not obtain services in the ng module. // It does not depend on the ng module, unable to get $ rootScope service var noNgInjector = angular. injector (['app']); console. log ("no $ rootScope =" + noNgInjector. has ("$ rootScope"); // false // obtain the angular core ng module var ngInjector = angular. injector (['ng ']); console. log ("ng $ rootScope =" + ngInjector. has ("$ rootScope"); // true

The above Code does indicate: $ RootScope is indeed created by core module ng and exists in injector as a service.

If ng module is specified during injector creation, $ rootScope is included in the injector; otherwise, $ rootScope is not included.

Example 2:

   
 <Script src = "angular-1.2.25.js"> </script> <script> var module = angular. module ("app", []); // $ injector in the controller, which is a function FirstController ($ scope, $ injector, $ rootScope) automatically created by the angular framework) {$ rootScope. name = "aty";} // you have created an injector, which depends on the app and ng module var myInjector = angular. injector (["app", "ng"]); var rootScope = myInjector. get ("$ rootScope"); alert (rootScope. name); // udefined </script>
{Name }}

Angular. injector () can be called multiple times, and the newly created injector object is returned each time.. Therefore, the self-created myInjector and the $ injector automatically created by angular are not the same object, so the obtained rootScope is not the same. For more details, seeAnother articleIn

Angular. injector.

Example 3:

   <script src="angular-1.2.25.js"></script>   <script>  function FirstController($scope,$injector,$rootScope){// trueconsole.log("scope parent :" + ($scope.$parent ==$rootScope));}   </script> 
{{name}}

The ng-controller command creates a new $ scope object for the DOM element and serves as the sub-scope of rootScope.. $ Scope is created by $ rootScope and $ scope is not protected in $ injector.

Example 4:

   
    Scope ()<Script src = "jquery-1.11.1.js"> </script> <script src = "angular-1.2.25.js"> </script> <script> // remember rootScope, used to determine whether cross-controller is equal var first_rootScope = null; // remember scope, used to determine whether cross-controller is equal var first_scope = null; // remember injector, used to determine whether the cross-controller is equal var first_injectot = null; // 1st angular controller functions FirstController ($ scope, $ injector, $ rootScope) {$ rootScope. name = "aty"; first_rootScope = $ rootScope; first_injectot = $ injector; first_scope = $ scope ;}// 2nd angular controllers, the function SecondController ($ scope, $ injector, $ rootScope) {console. log ("first_rootScope = second_rootScope:" + (first_rootScope = $ rootScope); // trueconsole. log ("first_injectot = second_injector:" + (first_injectot = $ injector); // trueconsole. log ("first_scope = second_scope:" + (first_scope = $ scope); // false} </script>
Outside of controller

 {$ Root. name }}

Ng-app defines an angular module, Each module has only one $ rootScope and only one $ injector, but multiple $ scope.

The relationships between $ injector, $ rootScope, and $ scope are clarified. Let's take a look at the two APIs provided by angular: scope () and injector (). DOM objects returned using angular. element () all contain these two methods to obtain the associated scope and injector.

Because the injector of each module is uniqueAngular. element (). injector () directly returns the injector of the module where the element is located..

Angular. element (). scope () can obtain the scope or parent scope of the current element. If the current element has a scope, its own scope will be returned; if not, it will be searched for by the father; if not, rootScope will be returned. That isReturns the scope chain closest to this element..

   
    Scope ()<Script src = "jquery-1.11.1.js"> </script> <script src = "angular-1.2.25.js"> </script> <script> function FirstController ($ scope, $ injector, $ rootScope) {// obtain the body object var domBody = document. getElementsByTagName ('body') [0]; // obtain rootScopevar rtScope = angular through the DOM element of the ng-app command. element (domBody ). scope (); // The current element does not have a new scope. Obtain the parent scope, that is, rootScopevar noScope = angular. element ("# noControllerDiv "). scope (); // trueconsole. log ("rtScope = noScope:" + (rtScope = noScope); // The element where ng-controller is located, returns scopevar scopeOnController = angular. element ("# first "). scope (); // The scopevar inController = angular that the element in the ng-controller returns. element ("# tips "). scope (); // trueconsole. log ("scopeOnController = inController:" + (scopeOnController = inController); // verify whether the scope Obtained Through DOM is consistent with the injected $ scope and $ rootScope. // trueconsole. log ("result1:" + (rtScope = $ rootScope); // trueconsole. log ("result2:" + (inController = $ scope) ;}</script>
Outside of controller

 {$ Root. name }}