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