Providers are objects that provide (create) instances of services and expose configuration APIs that can be used to control the creation and runtime behavior of a service. In case of the $route service, the $routeProvider exposes APIs that allow you to define routes for your application.
Note: Providers can only be injected into config functions. Thus you could not inject $routeProvider into PhoneListCtrl.
“The sole responsibilities of the injector are to load specified module definition(s), register all service providers defined in these modules, and when asked, inject a specified function with dependencies (services) that it lazily instantiates via their providers.”—http://docs.angularjs.org/tutorial/step_07
Compiler: Compile, link, tranclude and directive in AngularJS
Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.
Compile: traverse the DOM and collect all of the directives. The result is a linking function.
Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
A directive is just a function which executes when the compiler encounters it in the DOM.
How directives are compiled
The difference between Compile and Link in directive
Directives often have a link function. But it’s rare for directives to have a compile function, since most directives are concerned with working with a specific DOM element instance rather than changing its overall structure.
Transclusion in directive
When declaring a directive, use ngTransclude in template together with the tranclude: true option to enable transclusion. The contents of a transcluded directive have whatever scope is outside the directive. So it’s not affected by the isolated scope of the directive itself.
And it states very clear why isolated scope and transclude scope of a directive are siblings:
This behavior makes sense for a directive that wraps some content, because otherwise you’d have to pass in each model you wanted to use separately. If you have to pass in each model that you want to use, then you can’t really have arbitrary contents, can you?
There are two demos that demonstrate how transclusion and compile function may be used in a directive in this blog post.
The goal behind the expressions that you use in templates is to let you be as clever as you need to be to create hooks between your template, your application logic, and your data, but at the same time prevent application logic from sneaking into the template.
Controllers have three responsibilities in your app:
Set up the initial state in your application’s model
Expose model and functions to the view (UI template) through $scope
Watch other parts of the model for changes and take action
Note the difference between the extra parameters passed here and the eventData parameter to the .on() method. Both are mechanisms for passing information to an event handler, but the extraParameters argument to .trigger() allows information to be determined at the time the event is triggered, while the eventData argument to .on() requires the information to be already computed at the time the handler is bound.
When we use the iframeSubmit function, we’ll have the form point to upload.php for image submissions and the result will be loaded within the iframe (which is now a hidden element in the page). The upload.php script should process the submission and generate an iframe content which will call the function defined and passed by iframeSubmit, with the results of the operation.