Делает работу Angular JS в автономном режиме

Question

Я разрабатываю одностраничное приложение с помощью AngularJS, и я новичок в нем Я задал один и тот же вопрос раньше, но не получил ответа, поэтому я перефразирую свой вопрос и спрошу его еще раз

ВОПРОС: Мне нужно сделать, чтобы мое веб-приложение разрешило работать в автономном режиме для этой цели, поэтому файлы html, которые отображаются как view (например, home.html), должны быть как-то включены в индекс. html, поэтому при нажатии на некоторые ссылки не должно быть необходимости иметь доступ к html-файлу, а часть одной и той же страницы, например, будет отображаться, какие изменения должны внести в проект, чтобы сделать это.

в данный момент я сделал различные HTML-файлы и использовать их в качестве шаблонов при визуализации представлений, структуры приложения, как это:

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

вот код для конфиг маршрутов и контроллеров и представлений

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

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

а и мой файл main.html, например, как это:

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

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

и где-то в index.html у меня есть

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

код работает правильно и все в порядке в данный момент

Answer 1

, чтобы сделать ваше приложение работать форума, вы должны кэшировать каждый файл кэша html5 манифеста. Даже .html файлы, изображения, CSS, все ...

Уроженец «старый» кэширование не будет работать здесь, потому что она по-прежнему требует, чтобы обмениваться данными с сервером иметь «304 Not Modified «http-код.

манифест удаляет этот шаг, и даже не спрашивает сервер ресурсов.

Пример манифест:

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

Как включает и использование кэша манифест проверки: http://www.w3schools.com/html/html5_app_cache.asp

Для отладки:

Застревания кеша приложения под хромом Введите URL "chrome: // appcache-internals /"

---

EDIT: Из-за комментарии и от темы

Вместо размещения HTML-код во многих собственных HTML-файлов, вы можете включить их в индекс.HTML как это:

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

Тогда ваш templateURL является "one.html" без подпути.

Проверить документы: https://docs.angularjs.org/api/ng/directive/script

Подсказка:

Вам не нужно размещать какие-либо пути туда. Во время фазы рендеринга angularjs будет хранить каждый html-файл в $templateCache под его id, помещенным в эти элементы сценария.

Answer 2

Это может быть не на 100% применимо к вам. В зависимости от решения & или платформы, которую вы используете ... Но у меня есть прототип приложения, над которым я работаю в настоящее время, встроенный в Angular и Node.

Хотя это была моя попытка кулака в чем-то подобном ... EG кэширует все страницы заранее. Это, похоже, работает очень хорошо.

Все мои страницы преобразуются в дружественный кэш формат во время фазы сборки. Но в моем решении они все еще являются регулярными html-страницами.

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>"); 
}]); 

контроллер

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 
}); 

Все это волшебство любезно предоставлено html2js

grunt.loadNpmTasks ('grunt-html2js');

... Я верю, что его можно достичь этим эффектом различными способами, которые не требуют ворчать. Например, вручную создавая шаблоны в файле js ... но я бы не мечтал рекомендовать этот маршрут, так как он быстро превратился в кошмар