0

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.

2
  • The $injector is created by angular.bootstrap for more information, see AngularJS angular.bootstrap API Reference and AngularJS Bootstrap Guide. Commented Feb 27, 2017 at 4:23
  • @georgeawg That does not answer my question. I've read the documentation. I'm looking for how angular is structured for clarity purposes Commented Feb 27, 2017 at 16:33

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

1 Comment

This is what I'm talking about George! I'll mark it as the correct answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.