Avoiding extra HTTP requests when using AngularJS routing

Question

When using routing with AngularJS, the script will send extra HTTP requests to load a view. However if the user is using a direct link to that route then how can we avoid the extra requests being made? I.e. load everything from the server using a single request instead of a second request for the view?

Edit:

I need to make clear what I mean.

If a user goes to website.com#/second where second is a route with a corresponding view, then the routing system in AngularJS will load that view using a HTTP request. However I do not want this HTTP request to take place if the user has not visited any prior page in that website. Rather what should happen is that the server includes that view within the template. I.e. there wont be a need for the view to be fetched because the server has already included it.

In other words how can I stop the routing system? I can use an if statement, but where do I put it?

As I write this I assume a good place would be in the route handling function.

sampleApp.config(['$routeProvider',

    function($routeProvider) {  
        var firstVisit = true;
        if(!firstVisit){

            $routeProvider.
              when('/', {
                templateUrl: 'sections/main.php',
                controller: 'main_controller'
            }).
              when('/second', {
                templateUrl: 'sections/second.php',
                controller: 'second_controller'
            }).
              otherwise({
                redirectTo: '/'
            });   

        }
        firstVisit = false;

    }]);

Edit 2:

It did not work. I want the routing function to depend on the value of a variable.

I didn't exactly understand if the user is using a direct link to that route ... — Naeem Shaikh
– Naeem Shaikh, Commented Dec 8, 2014 at 13:21
You shall use resolve, In that way you can write a service which authenticate your user and while routing you check the user login status in resolve. If it succeeds then you can load the view. — Aditya Sethi
– Aditya Sethi, Commented Dec 8, 2014 at 13:56
possible duplicate of Is there a way to make AngularJS load partials in the beginning and not at when needed? — Brocco
– Brocco, Commented Dec 8, 2014 at 13:57

Polochon · Accepted Answer · 2014-12-08 14:08:42Z

1

You can load all the angular templates with the $templateCache angular provider. So you can use the templateUrl option (in your directives or simply in your routing) and it will retrieve in your cache the good template.

ex:

angular.module('template', [])
    .run(['$templateCache', function($templateCache) {
        $templateCache.put('folder/template.html', '<div>your template</div>');
    }]);


angular.module('YourApp', ['template'])
    .config(['$routeProvider', function($routeProvider) {

        $routeProvider
        .when('/route', {
            templateUrl: 'folder/template.html',
            controller: 'MyController'
        });
    }]);

However you must transform your html to a javascript string in order to use it. Some plugins on Gulp and Grunt can do it for you.

Hope it will help you

answered Dec 8, 2014 at 14:08

Polochon

2,22916 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Avoiding extra HTTP requests when using AngularJS routing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related