Apps for Foundation：如何替换默认的动态路由插件？

一尘不染

Apps for Foundation：如何替换默认的动态路由插件？

angularjs

Zurb的 Apps for Foundation
使用的是一个特殊的插件，该插件可直接从每个视图创建路线，它将解析所有HTML文件以找到这种markdown结构：

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

这将用于生成必要的角度动态路由代码，并使用 gulp 编译routes.js包含以下内容的文件：

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

所以我的问题是，如果我想更改模板路径或重构应用程序，或者是否需要对 Angle 的 ui路由器 进行更高级的使用，尤其是
state.resolve 和 state.views
，是否可以替换内置的动态路由？通过$stateProvider实例插入插件而不会破坏其他F4A的任何内置组件？

更新： 特殊的插件 称为 Front Router
，这是它的Github存储库。

阅读 271

2020-07-04

共1个答案

一尘不染

此解决方案解决了我的问题：

来自这个github问题页面的@escapedcat ：

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

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

2020-07-04