Foundation for Apps: как заменить плагин динамической маршрутизации по умолчанию?

Фонд Zurb Foundation for Apps использует специальный плагин, который создает маршруты непосредственно из каждого представления, он будет анализировать все HTML-файлы, чтобы найти такую ​​структуру уценки:

---
name: items
url: /items
controller: ItemCtrl
---

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

var foundationRoutes = [
    {
        "name":"items",
        "url":"/items",
        "controller":"ItemCtrl",
        "path":"templates/items.html"
    }
];

Поэтому мой вопрос: если я хочу изменить путь к шаблонам или реструктурировать свое приложение, или если мне нужно более продвинутое использование для ui-маршрутизатора angular, в частности state.resolve и state.views, есть ли способ заменить встроенную динамическую маршрутизацию плагин $stateProvider экземпляр, не ломая ни одного из других встроенных компонентов F4A?


ОБНОВЛЕНИЕ: Специальный плагин называется Front Router, и это его Github Repository.

1 ответ

Решение

Это решение решило мою проблему:

по @escapedcat со страницы выпуска github:

gulpfile.js: закомментируйте часть маршрутизатора FA:

// Copies your app's page templates and generates URLs for them
gulp.task('copy-templates', ['copy'], function() {
  return gulp.src('./client/templates/**/*.html')
    // .pipe(router({ 
    //   path: 'build/assets/js/routes.js',
    //   root: 'client'
    // }))
    .pipe(gulp.dest('./build/templates'))
  ;
});

index.html: удалить routes.js

<script src="/assets/js/foundation.js"></script>
<!-- <script src="/assets/js/routes.js"></script> -->
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="/assets/js/app.js"></script>

app.js: закомментируйте модули dynamicRouting и измените часть конфигурации:

 angular.module('application', [
    ...
    //foundation
    'foundation',
    // 'foundation.dynamicRouting',
    // 'foundation.dynamicRouting.animations',
    ...
    ])
    .config(
      function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('yourstate', {
              url: '/yoururl',
              templateUrl: 'templates/yourTemplate.html',
              controller: 'YourController',
              resolve: {
                  // you can use resolve here, yay!
                  // promiseFooData: ['Restangular', function(Restangular) {
                  //     return Restangular.one('foo').get();
                  // }]
              }
          });
    })
  .run(run)
;

Тебе необходимо .state запись для каждого маршрута / шаблона, который у вас был раньше. В этом примере часть раньше выглядела так:

---
name: yourstate
url: /yoururl
controller: YourController
---

ПРИМЕЧАНИЕ. Анимация также может быть добавлена ​​к state (после версии 1.1, я думаю):

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'templates/home.html',
    animation: {
      enter: 'slideInDown',
      leave: 'fadeOut'
    }
  });
Другие вопросы по тегам