Get $httpProvider from jquery so I can intercept messages - javascript

I have an angular app with javascript code I can't touch (3rd party code).
I'd like to intercept the http messages from outside of angular. I have figured out how to get the controller and injector and can get the $http service, but I can't seem to get the $httpProvider so I can add an intercept something like here
Code I've got so far is (it's actually in a timeout but I left that out for brevity),
$(window).load(
...
var injector = angular.element('#myBody').injector();
var httpProvider = injector.get('$httpProvider ');
httpProvider.interceptors.push(function ($q) {
...
but httpProvider isn't defined, $http is defined but it's not the same as the provider - I'm fairly new to angular, so is there any way to get the provider? Version is 1.1.5

Just to close the question - as calebboyd said:
Perhaps you can extend the app.
angular.module("3rdPartyApp").config(function($httpProvider){...});
This works.

Related

Mirage `passthrough` is not working

I'm trying to use passthrough for a POST request in this Ember project
this.passthrough('/thirdeye/entity?entityType=ANOMALY_FUNCTION');
This is what the call looks like in app/mirage/config.js.
I got the following error:
Mirage: Your Ember app tried to POST '/thirdeye/entity?entityType=ANOMALY_FUNCTION',
but there was no route defined to handle this request.
Define a route that matches this path in your
mirage/config.js file. Did you forget to add your namespace?
Clearly, I've added that call to the config file, but it's not being picked up. I read that passthrough only works for >= jquery 2.x, which my project is.
Does anyone know what else could cause this?
I found out the problem was I had to do this.passthrough('/thirdeye/***'); since the call has query params. It works now.

How to create an Angular module with changeable properties?

I'm writing an AngularJS module to provide some convenience for interacting with my product's REST API. Since my product is deployed on premise, each user will have to supply their own URL to interact with the API. So, the base URL needs to be configurable.
I've been looking at $http's way of setting default headers to figure out how to make a nice API for configuring such properties, but haven't had much luck. What I'm trying to achieve is something like this:
in my api.js file:
angular.module('myProduct', [])
properties.baseUrl = 'someDefault';
properties.authenticationToken;
authenticate = function(user, pass) {
properties.authenticationToken = $http.get(properties.baseUrl + '/login');
}
in the customer's app.js file:
angular.controller('myController', ['myProduct'], function($myProduct) {
// during initialization
$myProduct.properties.baseUrl = 'customer.com/myProduct';
// either during initialization, or after submitting a login form
$myProduct.authenticate('username', 'password')
.then(/* do some other API call */);
})
My questions are:
How to expose the properties in my module in a nice, configurable way?
How to expose the authenticate function in my module so it can be called from the customer's app.js in a nice way?
Any links to the Angular documentation I might have missed are also appreciated.
One angular way is using providers for module configuration.
Here documentation
Here a nice example
And here 2 fiddle, 1 for using defaultUrl and other for change it from client.
[http://jsfiddle.net/r057c9o5/3/][3]
[http://jsfiddle.net/t5uf9jau/][4]

Angular.js - running a service function before anything else?

Can you run an Angular service (or a function on that service) before anything else? Ideally, as soon as ng-app gets parsed.
Here's my use case: I'm writing an app that gets AJAX data from a server and then parses the data a hundred different ways. I would like to make the initial AJAX call before all the controllers get called? That way I just have all the data parsed and loaded in the service without me worrying about updating any controllers or whatever.
I would like to make the initial AJAX call before all the controllers get called
In Angular method run is fired before any controller is called
var app = angular.module('myApp',[]);
app.run(function($rootScope){
// ajax call and other stuff
}
In run method you can do any job like login to Facebook, token validation and so on
Reference
Configuration blocks (aka app.config) - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
Run blocks (aka app.run) - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
docs.angularjs.org/guide/module
plnkr = http://plnkr.co/edit/WTNuWKSgj0bMR1dtUkto?p=preview
The best way to configure how your services behave is to use providers. so, assuming you already have a mydata from your ajax call, the plnkr above shows a running example...
myapp.config(['sayHelloProvider',function(sayHelloProvider){
// assuming your ajax retrievies mydata
var mydata = angular.fromJson( angular.element(document.getElementById('mydata')).html() );
// configure service
sayHelloProvider.SetMessage("Olah! rate is=" + mydata.rate);
}]);

$httpBackend not working fine with ngMocksE2E module

I am making a simple application frontend with Angular JS (v1.2.16). I will be using REST API but that API is not build yet and its specs are complete. So based on the Link : $httpBackend
- service in module ngMockE2E, I can mock API request along with my development Process.
I have tried to do the same and come up with a demo but its giving me an error where I feel that its failing for passThrough function.
demo is available on this Link http://ngdemo.ws01.tranceserve.com/#/projects.
Now it gives me an error stating :
Error: Unexpected request: GET /views/projects.html
No more request expected
Please Help.
$httpBackend isn't prepared to handle the request for the views. Add a passthrough for your views:
$httpBackend.whenGET(/^\/views\//).passThrough();

AngularJS Module Configuration

Looking for some help with a best practice.
I have a module which I am setting a few custom headers. No big deal here:
$httpProvider.defaults.headers.common['token'] = function() {
return token;
};
token is a value that I must $http.get() on the page load.
My intial thought was to put this in my controller, but after thinking about it, it more more sense to do it in the module configuration on page load where I am setting my custom headers:
var app = angular.module('app',['ngRoute', 'ngResource'],function($httpProvider) {
// Custom headers
});
My question is two part:
Is this the best way to do this?
If it is, how do I make a $http.get() request inside of the module config?
app.config, as you might have noticed, won't allow you to use services like $http (or any service you make yourself), it's run before they are defined. Try putting the call in your app.run instead. It is after config and it has no restrictions against using services.
If it is the right approach or not is harder to answer as it depends on the exact use-case. As $http-calls are asynchronous you cannot just call your backend when the app starts and be sure the token exists in your controllers or services, the http call might not have returned yet! This might be a problem for you if you expect to use the token right away.
A better option, again depending on use-case, might be to use a resolve-function on any route that needs the token. A route will holds off on loading any controller and template until the routes resolve-function has finished. Using this method you can then be 100% sure that the token exists once the controller is run.
This video has a good intro to resolves.
They can also be combined. Running the http-call in your app.run, and then using a resolve function to make sure it exists before the controller loads.

Categories