Disabling Front Matter so Developer Can Use Own Routing

[tjnine]

How does one disable front matter routing so that I can take advantage of UI-Router myself? Any known solutions? I looked over the docs but couldn't find anything, and I don't know how the front matter is tied into how the states work with the controllers and such. In the Foundation for Apps docs it says "This app depends on the use of front matter". Is there a way to disable this? If not can we make it a Feature Request?

Thank You for any feedback, information, or suggestions.

[escapedcat]

Maybe someone from this issue knows:
Is it possible to use the resolve functionality of angular routes #387

[escapedcat]

This works for me:

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: remove the 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: 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)
;

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

Hope this helps.

[gakimball]

What @escapedcat said will work. The module foundation.dynamicRouting is what handles the creation of states from Front Matter, so if you don't include it, no states will be generated. We're doing exactly that for a client right now at ZURB—using all of the framework's UI components, but writing our own states.

There's one caveat right now, which is that view animation doesn't work without the foundation.dynamicRouting module. This will change in version 1.1 of the framework, which we're hoping to have out soon. Then you'll be able to add animation to your states like this:

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

The change is already in master if you want to mess around with it.

[mikestecker]

I'm interested in this also. I have Foundation Apps integrated into a Rails project, and I would like to use all of the UI components but continue to use the Rails routing functionality and HAML templates, at least through initial development, after which I'll probably want to build out the Rails app's API and convert over to Angular for all front-end.

[gakimball]

@mikestecker The front matter routing is totally optional, and we took out the line saying it's required from the documentation.

We're trying to put out v1.1 today, which will make view animation work without the router plugin, so you can write your own states but still set up transitions between them.

[mikestecker]

@gakimball great thanks. I'll wait for v1.1 today and see how I can modify the project to only use the UI components.

[mikestecker]

@gakimball I haven't seen the v1.1 update yet today but I did pull the latest from the repo. This on it's own still didn't work the way I want it to, but removing $urlProvider.otherwise('/'); from the app.js file allowed me to click around (kind of). It would change the URL in the browser and I would have to reload my browser to load the new page.

[olegpolyakov]

I have disabled the dynamicRouting and dynamicRouting.animations modules and configured my own states with the animation property, but there are no animations. Any advice?

[gakimball]

@olegpolyakov So, the awkward thing right now is that you still need those modules enabled to make view animation work, even if you're not using the Front Matter stuff. We were able to separate the functionality, but we haven't yet separated the modules themselves, to maintain backwards compatibility. We'll do that in a future version when we can properly deprecate it.