Как подключить view к ui-router?

Question

[Сергей]

Есть файл, сгенерированный gulp-ng-templates

angular.module("myApp", []).run(["$templateCache", function($templateCache) {$templateCache.put("/news/views/news.html","МОй шаблон");}]);

Как его подключить к ui-router?

'use strict';

angular.module('myApp', [
  'ui.router'
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
 
  $stateProvider
    .state('news', {
      url: "/",
      templateUrl: "/news/views/news.html"
    });
});

Answer 1

[Kano]

Полученный файл нужно загрузить на странице angularjs приложения (только загрузить его надо после загрузки скрипта с angularjs).
По коду файла видно что ваш шаблон помещается в кеш шаблонов с ключем совподающим с сылкой на ресурс.
ui.router использует тот же кеш шаблонов https://github.com/angular-ui/ui-router/blob/4da7e...

Comments

[Сергей]

Kano: это я заметил. Подключение происходит так: angular, template, ui-router
Но ui-router все равно делает запрос, а не использует шаблон из кеша

[Kano]

Сергей: Не забудьте загружать ваш файл после инициализации модуля приложения.
Т.е. если вы еще не вынесли определение модуля приложения в отдельный файл (как это рекомендуют)
app.js, то вам надо это сделать.
И загружать в такой последовательности
angular.js (фреймворк)
angular-ui-router.js.js (модуль роутинга)
app.js (модуль приложения)
templates.js (ваши шаблоны)

[Сергей]

Kano: А какая разница, ведь module.config запускается раньше чем module.run() ?

[Kano]

Вы дважды определяете модуль, первый раз в файле ресурсов
angular.module("myApp", [])
второй раз в файле приложения
angular.module('myApp', [
'ui.router'
])
Кстати еще одна проблема вы генерируете модуль шаблонов gulp-ng-templates с именем вашего приложения с опцией {standalone:true} это приводит к генерации кода объявления модуля как
angular.module("myApp", []), а в вашем случает лучше либо задать {standalone:false} и тогда код шаблона будет выглядеть так angular.module("myApp"), но его придется загружать строго после инициализации модуля приложения, либо задать для модуля шаблонов другое имя и включить его в зависимости модуля вашего приложения
angular.module('myApp', [
'ui.router', 'my.resources'
])

[Сергей]

Kano: Просто гуру. Я и так и так пробовал. Но с standalone:false он ругался, что нет модуля.
Сделал ручками подключение app.js для инициализации модуля, затем подключать template без создания модуля, т.е. без [] и заработало

Резюмирую:

<!-- bower:js -->
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- inject:js -->
<script src="/common-bundle/scripts/app.js"></script>
<script src="/news/templates.js"></script>
<!-- endinject -->

app.js
angular.module('katerClubApp', ['ui.router'])....

templates.js
angular.module("katerClubApp").run(["$templateCache", function($templateCache)....

Буду теперь gulp настраивать, спасибо