Makes Angular JS Work Offline

Question

I am developing a one-page application using AngularJS and I am new to it. I asked the same question before, but I have no answer, so I will rephrase my question and ask it again.

QUESTION: I need to make my web application allow to work offline for this purpose, html files that appear as view (for example, home.html) should somehow be included in index.html, so when I click on some links should not need to have access to the html file, but part of the same page, for example, a dive will be displayed, what changes should I make in order to execute the project in order to do this.

at the moment I have created different html files and used them as templates for visualizing views, the structure of the application is as follows:

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

here is the code for configuring 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 for example, my main.html file looks like this:

  <div class="jumbotron text-center"> <h1>Main Page</h1> <p>{{ message }}</p> </div> 

and somewhere in index.html I have

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

The code is working correctly and everything is fine at the moment

Answer 1

For your application to work offline , you must cache each file using the html5 cache manifest. Even .html files, images, css, everything ...

The configured "old" caching will not work here, because to communicate with the server, you need to have the http code 304 Not Modified.

the manifest removes this step, and does not even request a server for resources.

Manifest example:

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

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

For debugging:

To clear the application cache under chrome, enter the url "chrome: // appcache-internals /"

---

EDIT : due to comment and from topic

Instead of placing HTML code in many native html files, you can include them in index.html as follows:

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

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

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

Hint:

You do not need to place any tracks there. During the rendering phase, angularjs will store each html file in $templateCache with the id placed in these script elements.

Answer 2

This may not be 100% applicable to you. Depending on the solution and platform used ... But I have a prototype of the application I'm working on now, built-in to Angular and Node.

Although it was my attempt to fist in something like this ... EG caches all pages in advance. This seems to work quite well.

All my pages are converted to a cache compatible 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 magical courtesy of html2js

grunt.loadNpmTasks ('Ground-html2js');

... I believe that it is possible to achieve this effect in various ways that do not require a grunt. For example, manually creating templates in the js file ... but I would not dream of recommending this route, since it could quickly turn into a nightmare.