应用基础:如何替换默认的动态路由插件?

问题描述

Zurb 的 Foundation For Apps 正在使用 特殊插件 直接从每个视图创建路由，它将解析所有 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
---

这将用于生成必要的角度动态路由代码并使用 gulp 来编译一个 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"
    }
];

所以我的问题是，如果我想更改我的模板路径或重构我的应用程序，或者我需要更高级地使用 angular 的 ui-router 特别是 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 ?

更新:特殊插件被称为Front Router，这是它的 Github 存储库.

推荐答案

这个解决方案解决了我的问题:

This solution solved my issue :

@escapedcat 来自 这个 github 问题页面:

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模块并修改config部分:

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
---

注意:动画也可以添加到 state (我猜是 1.1 版之后) :

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'templates/home.html',
    animation: {
      enter: 'slideInDown',
      leave: 'fadeOut'
    }
  });

这篇关于应用基础:如何替换默认的动态路由插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！