Home > Developer > Web Develop
$injector, $rootScope, and $scope are important things in the AngularJS framework, and it is useful for us to follow up on the AngularJS framework of learning and understanding.
1.$injector is actually an IOC container that contains a lot of services (similar to beans in the spring framework), and other code can pass $injector. Get ("ServiceName") way, Get the services you need from the injector. For more information, refer to this article
2,scope is the scope of the ANGULARJS (in fact, where the data is stored), very similar to the JavaScript prototype chain . When searching, prefer to find their own scope, if not found on the scope chain to search up, until the root scope Rootscope reached.
3,$rootScope is automatically created by Angularjs load module, each module will only have 1 rootscope. Rootscope is created as a service and is added to the $injector. that is, by $injector. Get ("$rootscope"), the ability to get to the root scope of a module. More precisely, the $rootScope was created by Angularjs's core module NG.
Example 1:
Create a new module var modules = Angular.module ("App", []);//True to indicate that $rootscope is indeed included in the module's injector in the form of a service var hasnginjector = Angular.injector ([' app ', ' ng ']); Console.log ("Has $rootScope =" + Hasnginjector.has ("$rootScope"))//true//gets the corresponding injector object of the module, does not acquire the services in the NG module//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//gets the angular core of the NG module var nginjector = angular.injector ([' ng ']); Console.log ("ng $rootScope =" + Nginjector.has ("$rootScope"));//trueIf the NG module is specified when the injector is created, the $rootscope service is included in the injector, otherwise $rootscope is not included.
Example 2:
< Span style= "font-size:18px" >
<!doctype html>Angular.injector () can be called multiple times, returning the newly created injector object each time . So we created the Myinjector and angular automatically created $injector is not the same object, then the resulting rootscope is not the same one. More details can be seen in another article
Angular.injector () section.
Example 3:
<!doctype html>The ng-controller directive creates a new $scope object for the DOM element in which it is located, and acts as a child scope for the Rootscope . $scope was created by $rootscope, $scope is not protected in $injector.Example 4:
< Span style= "font-size:18px" >
<!doctype html>Ng-app defines a angular module with only one $rootscope per module and one $injector, but can have multiple $scope.Figuring out the relationship between $injector, $rootScope, and $scope 3, let's look at 2 APIs provided by angular, one is scope () and one is injector (). The DOM object returned with Angular.element () contains the 2 methods used to obtain the scope and injector associated with it.
Because the injector of each module is unique, angular.element (). Injector () returns the injector of the module that contains the element directly.
Angular.element (). Scope () can get the scope or parent scope of the current element. If the current element has a scope, it returns its own scope, if not the parent, if no return rootscope is found. That is, the scope that is closest to the element is returned onthe scope chain.
< Span style= "font-size:18px" > /p>
<!doctype html>
Clarify the concepts and relationships of $injector, $rootScope, and $scope in Angularjs with a few pieces of code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
