0

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.

Romario
  • 29
  • 4
  • 1
    I didn't exactly understand **if the user is using a direct link to that route ...** – Naeem Shaikh Dec 08 '14 at 13:21
  • 1
    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 Dec 08 '14 at 13:56
  • possible duplicate of [Is there a way to make AngularJS load partials in the beginning and not at when needed?](http://stackoverflow.com/questions/12346690/is-there-a-way-to-make-angularjs-load-partials-in-the-beginning-and-not-at-when) – Brocco Dec 08 '14 at 13:57

1 Answers1

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

Polochon
  • 2,199
  • 13
  • 13