title: Makes Angular JS works offline
body: <p>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 </p>
  
  <p>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</p>
  
  <p>at the moment I made different html files and use them as templates when rendering views,
  the structure of app is like this : </p>
  
  <pre><code>  - index.html          
     - pages              
      ----- home.html
      ----- profile.html
  </code></pre>
  
  <p>here is the code for config the routes and controllers and views </p>
  
  <pre><code>  var formApp = angular.module('formApp', ['ngRoute']);
  
    formApp.config(function($routeProvider) {
      $routeProvider
         .when('/', {
             templateUrl : 'main',
             controller  : 'mainController'
          })
      .when('/profile', {
          templateUrl : 'profile',
          controller  : 'profileController'
      })
    }); 
  </code></pre>
  
  <p>And and my main.html file for example is like this :</p>
  
  <pre><code> &lt;div class="jumbotron text-center"&gt;
       &lt;h1&gt;Main Page&lt;/h1&gt;
  
       &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>َand somewhere in the index.html I have</p>
  
  <pre><code>         &lt;div ng-view&gt;
                {{ message }}
            &lt;/div&gt;
  </code></pre>
  
  <p>The code works properly and everything is fine at the moment </p>