Makes Angular JS works offline

Question

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 quest

Answer 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

    HOME

templates.js

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

angular.module("home.tpl.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("home.tpl.html",
      "
\n" +
         "HOME\n"+
      "
");
 }]);

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