基础应用:如何替换默认的动态路由插件? [英] Foundation for Apps : How to replace the default Dynamic Routing plugin?
问题描述
Zurb的基金会对于应用是使用特殊插件直接从每个视图创建路线,它会解析所有的HTML文件,以找到这种降价的结构:
Zurb's Foundation For Apps is using a special plugin that creates routes directly from each view, it will parse all the HTML files to find this kind of markdown structure :
---
name: items
url: /items
controller: ItemCtrl
---
将使用产生必要的角动态路由code和使用一饮而尽编译其中将包含一个 routes.js
文件这样的:
which will use to generate the necessary angular Dynamic Routing code and use gulp to compile a routes.js
file which will contain this :
var foundationRoutes = [
{
"name":"items",
"url":"/items",
"controller":"ItemCtrl",
"path":"templates/items.html"
}
];
所以我的问题是,如果我想改变我的模板路径或restructre我的应用程序,或者如果我需要角的 UI路由器更高级的使用专门的 state.resolve 和 state.views ,有没有一种方法来取代内置由 $ stateProvider
实例动态路由插件,而不会破坏任何其他F4A年代内置的组件?
So my question is, if I want to change my templates path or restructre my app or if I need more advanced use for angular's ui-router specially state.resolve and state.views, Is there a way to replace the built-in Dynamic Routing plugin by a $stateProvider
instance without breaking any of the other F4A's built-in components ?
更新:在特殊插件的被称为接待路由器,这是的其Github上库。
UPDATE : The special plugin is called Front Router and this is its Github Repository.
推荐答案
此解决方案解决了我的问题:
This solution solved my issue :
由@escapedcat从这个问题GitHub的
页面:
by @escapedcat from this github issue page :
gulpfile.js
:注释掉FA路由器部分:
gulpfile.js
: comment out the FA router part :
// 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模块和修改配置部分:
app.js
: comment out the dynamicRouting modules and modify the config part :
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
项。
在这个例子中,部分搜索之前是这样的:
You need a .state
entry for each route/template you had before.
In this example the part before looked like this :
---
name: yourstate
url: /yoururl
controller: YourController
---
请注意:动画也可以加入到状态
的(1.1版本之后我猜)的:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
animation: {
enter: 'slideInDown',
leave: 'fadeOut'
}
});
这篇关于基础应用:如何替换默认的动态路由插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!