How to load static content and templates on start up?

[André Eife]

Hello,

I have an angularjs application and the files are served by an express server which also handles a socket.io connection. When the server shuts down the client recognizes this and shows a message that the server is offline.

My problem is that I want to display a whole template with images instead of a simple message in this case. But loading templates and images is not possible anymore once the server is offline.

So is it possible to load specific urls or templates and images once the application starts so that there is no need for another request when the server shuts down? I know there is $templateCache but I dont know how to include Images and as far as I know it only supports inline strings instead of external template files.

Thanks in advance.

[Leonardo Campos]

Html templates can be stored in angular $templaceCache.put(key, content).

http://jsfiddle.net/alimills/7YqZk/

If you consider an image preload approach maybe you can get what you.

So images will be put in browser cache before the server fails. 

function preloadImages(array) {
    if (!preloadImages.list) {
        preloadImages.list = [];
    }
    for (var i = 0; i < array.length; i++) {
        var img = new Image();
        img.src = array[i];
        preloadImages.list.push(img);
    }
}

var imageURLs = [
    "url1.jpg",
    "url2.jpg",
    "url3.jpg"
];

preloadImages(imageURLs);

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Att.
Leonardo da Silva Campos

"Keep distance, coder coding!"

[Josh David Miller]

Hello!

A generic solution is to use the application cache, which is designed for just this purpose: https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache

Josh
(Sent from my mobile)

[Leonardo Campos]

It's the right way, but it doesn't work in all browsers, right (HTML5 restrictions)?

[Josh David Miller]

It works in all modern browsers plus IE10: http://caniuse.com/#feat=offline-apps. But yeah, not the best if you need legacy browser support. But unlike the other methods, this will work across page refreshes. There are trade-offs.

Josh
(Sent from my mobile)

[Leonardo Campos]

Unfortunately IE doesn't have automatic update. =/

[André Eife]

Thanks for the answers. I will definity look into application cache and also the manual approach wich saving images.

$templateCache itself does only support strings? Would be nice if it would take an external html template file as an argument like the router does. So it could load the file from the server and save its content with the specific key.

[Josh David Miller]

"Unfortunately, IE doesn't have..." is the beginning to so many sentences. :-)

$templateCache takes a string, but you can easily leverage it with $http:

$http.get( templatePath, { cache: $templateCache }).then(function (response) {
  // you probably don't need to do anything with the promise
  // but you could:
  var template = response.data;
});

The caches used by $http are the same as the $templateCache, so if you pass the $templateCache to your $http request, the response will be cached as a template. Done. :-)

Josh
(Sent from my mobile)

On Jul 3, 2013 10:51 AM, "André Eife" <andre...@gmail.com> wrote:

Thanks for the answers. I will definity look into application cache and also the manual approach wich saving images.

$templateCache itself does only support strings? Would be nice if it would take an external html template file as an argument like the router does. So it could load the file from the server and save its content with the specific key.

--

[Leonardo Campos]

Yes, $templateCache supports string only.

But if it has an image (<img src="">) previously loaded, the browser won't send a new request to the server and will get it from cache.

You can use $http with no restrictions on your app start (before a server failure).

I would like to see IE with automatic update to use moderns approachs. =/

On Wed, Jul 3, 2013 at 2:51 PM, André Eife <andre...@gmail.com> wrote:

Thanks for the answers. I will definity look into application cache and also the manual approach wich saving images.

$templateCache itself does only support strings? Would be nice if it would take an external html template file as an argument like the router does. So it could load the file from the server and save its content with the specific key.

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[André Eife]

Okay thanks, I implemented the solutions stated here and it works fine so far. I can load the external tempate on start up and display it once the server goes offline.

But I dont seem to get the image preload to work. I preload them on start up like stated in the first answer:

function preloadImages(array) {

  if (!preloadImages.list) {

      preloadImages.list = [];

  }

  for (var i = 0; i < array.length; i++) {

      var img = new Image();

      img.src = array[i];

      preloadImages.list.push(img);

  }

}

preloadImages(["images/error.png"]);

$http.get('views/msgServerOffline.html', { cache: $templateCache }).then(function (response) {

});

The network tab in chrome also shows that the image is loaded. But after the server is offline and the template is loaded from cache including <img src="images/error.png">. But it tries to load the image again from the server and does not display it.

[Leonardo Campos]

Chrome behaves a little bit different from others browsers

https://code.google.com/p/chromium/issues/detail?id=102706

http://stackoverflow.com/questions/8953243/javascript-preloading-of-any-images-not-working-in-chrome

For you don't waste time struggling with this cache issue another easy solution is preload a simple DIV
(with your message and images) with 'ng-show="isOffline"' and set isOffline to true on main controller when server shuts down.

Is this approach feasible?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[André Eife]

Yes thanks I think I can find a workaround or use some of the solutions stated in your links. Interesting chrome behaves that way.

[fess]

This seems like something the script directive would be usefull:

http://docs.angularjs.org/api/ng.directive:script

(seems that like ember, angular can store templates in script tags.)