9

I am developing a single page application, with help of AngularJS and I'm new to it I asked the same question before but haven't got any answer so I am rephrasing my question and ask it again

THE QUESTION: What I need to do is to make my web app enabled to work offline for this purpose the html files which are rendered as view (for example home.html) should be included somehow in the index.html, So when clicking on the some links there should be no need to have access to a html file instead a part of the same page for example a dive will be rendered, what modifications should I make to project to get this done

at the moment I made different html files and use them as templates when rendering views, the structure of app is like this : 

  - index.html          
   - pages              
    ----- home.html
    ----- profile.html

here is the code for config the routes and controllers and views 

  var formApp = angular.module('formApp', ['ngRoute']);

  formApp.config(function($routeProvider) {
    $routeProvider
       .when('/', {
           templateUrl : 'main',
           controller  : 'mainController'
        })
    .when('/profile', {
        templateUrl : 'profile',
        controller  : 'profileController'
    })
  });

And and my main.html file for example is like this :

 <div class="jumbotron text-center">
     <h1>Main Page</h1>

     <p>{{ message }}</p>
  </div>

َand somewhere in the index.html I have

         <div ng-view>
              {{ message }}
          </div>

The code works properly and everything is fine at the moment

Siavosh
  • 2,314
  • 4
  • 26
  • 50
  • not quite sure what you are asking for ... how to include a template in my index.html? then [ng-include](https://docs.angularjs.org/api/ng/directive/ngInclude) may help you – nilsK May 14 '14 at 10:48
  • 1
    If you are asking about how to run a local server, you can read the answer to this question : http://stackoverflow.com/questions/19502978/do-angular-views-work-when-a-site-is-served-from-the-local-file-system – Julien May 14 '14 at 10:52
  • @nilsK sorry if it wasn't clear enough I made a bit modification let me know if it's more readable now – Siavosh May 14 '14 at 10:53

2 Answers2

14

To make your application work offline, you have to cache every file with the html5 cache manifest. Even the .html files, images, css, everything...

The native "old" caching won't work here, because it still requires to communicate with the server to have the "304 Not Modified" http code.

The manifest removes this step and doesn't even ask the server for the resources.

An example manifest: 

CACHE MANIFEST
/angular.js
/index.html
/page/home.html
/page/profile.html
NETWORK: 
*

How to include and use cache manifest check: http://www.w3schools.com/html/html5_app_cache.asp

For debugging:

Clearing a app cache under chrome enter url "chrome://appcache-internals/"

EDIT: Due to comment and off the topic

Instead of placing the html code in many own html files, you can include them in index.html like this: 

<script type="text/ng-template" id="one.html">
     <div>This is first template</div>
</script>

Then your templateURL is "one.html" without subpath.

Check docs: https://docs.angularjs.org/api/ng/directive/script

Hint:

You dont need to place any paths there. During rendering phase, angularjs will store every html file in the $templateCache under it's id placed in those script elements.

Konstantin Krass
  • 8,626
  • 1
  • 18
  • 24
  • Thanks for the answer it was helpful so I voted it up but still not sure if it solves my issue, is there any way that tempalteUrl in routes address some div inside the index.html file instead of another html file – Siavosh May 14 '14 at 11:11
  • for example with help of some kind of javascript or angular templating because in this way I think at least one time the file should be downloaded (after the first download it will work offline) but I need those templates to be included in the index.html file from the very beginning – Siavosh May 14 '14 at 11:19
  • 1
    yeah you need to visit the page once, to cache everything. And yes you can place all partial html files into the index.html, but this wont make it accessable offline, since you need to request the url/server anyways. – Konstantin Krass May 14 '14 at 12:27
  • Thanks I finally get it working, that hint for removing cache in chrome was really useful – Siavosh May 17 '14 at 09:27
1

This might not be 100% applicable to you. Depending on the solution & or platform you're using... But I've got a prototype application that I'm working on currently, built in Angular and Node.

Although this was also my fist attempt at something like this... EG caching all the pages upfront. This seems to work quite well.

All my pages get converted to a cache friendly format during the build phase. But in my solution, they are still regular html pages.

home.tpl.html

<div class="well home-menu">
    HOME
</div>

templates.js

angular.module('templates', ['home.tpl.html']);

angular.module("home.tpl.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("home.tpl.html",
      "<div class=\"well home-menu\">\n" +
         "HOME\n"+
      "</div>");
 }]);

controller

angular.module('myApp.home', ['templates'])
.config(function ($stateProvider) {
  $stateProvider
    .state('app.home', {
      url: '/home',
      templateUrl: 'home.tpl.html',
      controller: 'HomeController'
    });
})
.controller('HomeController', function ($scope) {
    //do something
});

All this magic courtesy of html2js

grunt.loadNpmTasks('grunt-html2js');

...I do believe its possible to achieve this effect in various other ways that doesn't require grunt. For example manually creating the templates in the js file... but I wouldn't dream of recommending that route, as it could turn into a nightmare quickly

Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106