I've been trying to understand to core of angular. I'm having trouble understanding the way things are structured after angular has compiled. I know the Injector contains/keeps track of Angular Services,Factories, Providers etc -- Pretty much every method that comes from the $provider service. I know that value is then grabbed by the injector and when referenced it grabs the single value that was obtained when the instance of the provide method was called because the $get method only retrieves a single instance of the method value--the reason why they are singleton objects(what I wrote was a bit repetitive but I want to be clear). A few of the questions I have are Is there a Global Injector or does each module have its own Injector? Is the Injector an Object? This is how I'm Picturing it
var angular = {
injector: [fn],
bootstrap: [fn],
$provider: {
factory:[fn],
service: [fn],
constant: [fn]
}
modules: {
$injector: {
//Names of All Factories/Services/Etc.
},
myApp: {
dependencies:[modules.myServices, modules.controllers, modules.filters]
},
myServices: {
dependencies: [],
controllers: {
myTestCtrl: {
//All controller logic
}
}
},
controllers: {
//list of controllers and logic
},
filers: {
//list of filers and logic.
}
}
}
This snippet was created with the idea that I have a module for filters, controllers and services. I usually structure things this way because the controllers and services script can get pretty lengthy(yes, i know you can do "var app =" and reference app, please don't waste an answer. myService has a controller property to show that it is a module which has the ability to have a controller, nothing more. If you honestly don't know, don't guess for the sake of an answer, please only give me an answer if you're 100% for certain you know what you're talking about.
The angular.bootstrap(rootElement, moduleArray, config) method constructs an $injector object and a $rootScope object and stores references to them as properties of the jqLite data object for the element.
This object can be viewed with:
console.log(angular.element(rootElement).data());
A typical app structure using the 'ng' module is as follows:
rootElement.data()
- $scope (rootScope)
- $injector
- $providerProvider (provider cache)
- $controllerProvider (controller cache)
- $compileProvider (directive cache)
- $filterProvider (filter cache)
- $cacheProvider (template cache)
- $qProvider (promise library)
- $httpProvider (XHR library)
The caches are private variables of their respective providers and are retrieved by their respective function methods.