current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

I have already created an http interceptor and based on my observation, it only applies to all that uses $http service. What if I want to intercept even the css, html and js files used in the template? Is it possible?

This is the code of the interceptor I mentioned above: 

app.factory('redirectInterceptor', function($q,$location,$window){
return  {
    'response':function(response){
    if (typeof response.data === 'string' && response.data.indexOf("My Login Page")>-1) {
        $window.location.href = "/login.html";
        return $q.reject(response);
    }else{
        return response;
    }
    }
}

});

app.config(['$httpProvider',function($httpProvider) {
    $httpProvider.interceptors.push('redirectInterceptor');
}]);

I want to be able to do an interceptor for css, html and js (for template) just like the one above.

share|improve this question
1  
What you are trying to do, seems more appropriate for server side implementation. – Chandermani Apr 15 at 4:42
    
you can intercept html files – entre Apr 15 at 4:51
    
@Chandermani when the session expires and I try to visit a page that needs authentication, the page will be blank. When I debug using firebug, I could see that some of the css and js are being called but the response is 302. But redirection doesn't take place. I would want to do an interceptor, that would do the same thing as the code I've posted. – user3714598 Apr 15 at 4:56
    
There is nothing in Angular for this. But look at if there is browser js api for it. – Chandermani Apr 15 at 5:02
    
@entre how? what about js and css? – user3714598 Apr 15 at 5:04

3 Answers 3

up vote 1 down vote accepted

As you said,

it only applies to all that uses $http service

So, if you want to intercept the requests for html,css and js files. It is best done on the server, rather than the client.

share|improve this answer
    
Actually, that is just based on my observation, so I was expecting 1) someone would agree to what I've said and probably give me a solution or 2) someone would disagree and corrrect me. Anyway, I already talked to th server guy and asked him to do some modifications but he insisted that this should be done in the front. – user3714598 Apr 15 at 7:55
up vote 1 down vote

you can intercept html files

    var requestInterceptor = function (config) {

        if (config.url.indexOf(".html") != -1) {
            //custom logic
        }
   }

though above does not work with .js or .css because they are loading using tag.

.html files are saved in template-cache and fires $http requests...

though you should go ahead and test what all being requested by doing console.log(config.url) in the interceptor to be sure..

share|improve this answer
up vote 1 down vote

This is a classic X-Y problem. You're thinking of a solution to your problem but it's the wrong way to go about it.

This line, from your comment, explains the actual problem:

but the js files that I'm referring to are the business logic of the project. So making it public is not an option.

So, your problem is you don't want to expose business logic to people who haven't/can't login.

There are several solutions to this. But it all boils down to one thing: separate your business logic from common js code used for UI etc.

Once you've separated your js into two parts (not necessarily two files but it must be at least two files, it can be more) you can expose your common js file(s) as public. Then you can decide how to handle loading your business logic:

  1. Letting it Fail

    This is probably the simplest strategy. Just do nothing and it will fail to load. Presumably you only need your business logic on logged-in pages so not having it in the landing or login pages should not be an issue.

  2. Dynamicly Include it in the Template

    Just omit the script tag that loads the business logic js if user is not logged in.

  3. Load Business Logic Dynamically in JS

    Either load it using AJAX then eval it or use require.js or use jQuery getScript() or something similar to load the business logic only when the user is logged in.

If you're creative you can probably come up with a couple more ways to handle loading the business logic JS. Whatever it is, the key is you need to make the common js and css files public.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.