What is going on in the configure phase of bootstrapping angular app. Unable to imagine it. Right now i am confused with providers. SO may be insight to configure phase help me understand whole process.As provider can be injected in config phase.
Thanks.
An angular application uses services ($http, $location, etc.).
It's sometimes necessary to configure these services before using them. For example, the $location service has two modes of execution: the "normal" mode, and the "html5" mode. $http might need some headers configured before even sending its very first HTTP request.
To configure these services, Angular uses providers. Providers are objects whose role is to accept configuration options during the configuration phase, and then, once everything is set up, to create the unique instance of a service.
So, to configure the $location service, you use its $locationProvider during the configuration phase. Once that phase is done, Angular, during the run phase, will call the provider's $get() method, which will create and return the $location service (hence the name "provider").
Related
How can I inject the request or the execution context in a service without the help of controller without any performance issues?
The docs make it very clear that to pass the request to a service you can use a REQUEST scoped service with #Inject(REQUEST) or you can get the request in the controller via #Req() and pass that to the service method.
There is nestjs-cls which may be helpful as well, but generally, you either pass it on or you take the performance hit for REQUEST scoping the provider.
My apps are using many web services on the intranet, and url-s for those depend on the server environment.
My apps are hosted on IIS, which adds an HTTP response header like this: Environment: DEV, so every web app knows in which server environment it is running, and thus which intranet servers it must use to call all the services.
Each of my angular apps uses a service that issues a simple GET against the app's own root just to get any response with the environment name in it, and set configuration accordingly.
Question:
How should an angular app implement such a service that would execute as the very first thing in the application, and make sure that while it is getting that first response, nothing in the app tries to execute an HTTP request against other services, or even try to use any configuration provided by my environment service?
Is there a way to implement such a service in angular that could block every other service / factory in the application till it is done initializing itself?
I have many other services in the app, and none of them really know what to do till my environment service has finished its initialization.
UPDATE
Looking at it from another angle.... is it possible to implement such an interceptor in angular that could do the following?:
execute an HTTP request and block the app's execution till it gets a response
make information from the response available throughout the app as a service/factory/config.
Angular lifecycle could be one solution. Using the angular.config() phase you could peek at the headers of the HTTP service.
Create a factory called 'httpInterceptor'
function httpInterceptors(siteConfig, $q, $injector) {
return {
response: function(data, status, headers) {
siteConfig.setEnvironment(headers['Environment']);
return data;
}
};
)
Then in angular.config()
$httpProvider.interceptors.push('httpInterceptor');
If you truly want to block the other option is to use UI router resolve property to block routes loading until the request has been made https://github.com/angular-ui/ui-router/wiki you can add the resolve method to the root state.
Resolve
You can use resolve to provide your controller with content or data that > is custom to the state. resolve is an optional map of dependencies which > should be injected into the controller.
If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.
I am writing an AngularJs app to test an API we developed. The app uses the $http object to make requests to the API. One of the asks is that after the call it's possible to review the raw HTTP (headers and bodies) Request/Response, similarly to what's available in Fiddler via Raw tabs.
Is it something that $http provides out of the box?
If not, it appears that the only challenge is gaining access to the actual request http headers. It's easy to get the response headers and request/response bodies, but not sure how to get the actual request headers.
Thanks.
If you are using $http service to make your API calls, you can use Interceptors to achieve what you want.
Here is what docs tell us about them:
For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise APIs to fulfill this need for both synchronous and asynchronous pre-processing.
You can find more in depth explanation in the official docs. For example, here.
Also, there are some questions about interceptors on this site. There are some examples of their usage for displaying loading screen in applications: here, here and, probably, somewhere else.
Hope, this helps.
Yes, AngularJs is wrapped around some JQuery or internally JQlite if JQuery is not present and written in Javascript and it provides some pre-defined services. A typical service looks like the following.
AngularJS docs: tutorial step 5
$ Prefix Naming Convention You can create your own services, and in
fact we will do exactly that in step 11. As a naming convention,
Angular's built-in services, Scope methods and a few other Angular
APIs have a $ prefix in front of the name.
The $ prefix is there to namespace Angular-provided services. To
prevent collisions it's best to avoid naming your services and models
anything that begins with a $.
If you inspect a Scope, you may also notice some properties that begin
with $$. These properties are considered private, and should not be
accessed or modified.
angular.module('myApp')
.factory('myService', function ($http, $injector) {
'use strict';
return $http.get('/endpoint')
.then(function () {
return $injector.get('endpoint');
}
.error(function () {
// handle error
}
};
})
Have a look a the image in AngularJS docs which shows a number of services with the $ prefix. Mostly, wrappers over service. It is reserved. More at FAQ.
I have some configuration values(numbers) that I need while doing some computation in the angular code in the client controller. I general, how can one access the serverside config data in the clientside code?
If note is it possible to have a config file/folder in the public folder and easily access using angular code in client controller?
I'm not 100% sure what you are looking for here, but you have basically 3 options to handle this.
Expose An API Endpoint
You should be able to simply create an API endpoint to read the config data on the server and send it down to the client as JSON. Then you could access it in Angular like so:
$http.get('/api/config')
.success(function(configData){
//Do something with config data
});
Expose Config File Publicly
Warning - This may not be wise if your config contains sensitive data such as connection strings.
If you have a .json or a .xml file on the server with this info, then you could just make it available to HTTP GET requests and then the same code as above would apply. With the exception that if it is XML you will need to add a transform to parse the data.
$http.get('/config.json')
.success(function(configData){
//Do something with config data
});
Embed Config As Angular Constant/Value
Note - This won't work if your data is dynamic on the server.
An even simpler way is to simply put your configuration into a .js file and register it with Angular as a constant or a value.
angular.module('myModule')
.constant('config', {
foo:'bar',
blah:123
});
This way you can simply inject that anywhere in your app that you need access to it.
I'm learning AngularJS and I noticed that A Factory is a short-hand for a Provider.
Can you tell me specific scenarios where I should/must use a Provider instead of a Factory? The codes stays much more readable if use a Factory method instead of the provider.
A Provider is necessary when the provider itself has methods that you want the user of your service to call during the configuration phase of the application.
See for example the $location service: it has a $locationProvider which allows setting it to html5 mode, while the application is being configured (using module.config()).