I am trying to write my first modular app using Ampersand.js but I'm having a few issues! Hoping somebody can point me in the right direction...
Ok so I have configured Watchify and Browserify into my html file to create a bundled.js file that will be recompiled every time I make a change. I then wanted to add an Ampersand module- ampersand-router (installed in terminal as npm install --save ampersand-router to specify all of the application routes I'd like to handle and redirect users if they hit an unavailable route.
The problem its not redirecting my # routes and I cant figure out why! Because I don't have a server (or need one for this project) I am trying to use # based routing and i'd like it to handle three routes, an empty route (my starting point), gif/id route an a catch route which will redirect to the starting point.
So my file structure contains a router.js:-
'use strict';
var AmpersandRouter = require('ampersand-router');
module.exports = AmpersandRouter.extend({
routes:{
'': 'gifs', //empty
'gif/:id': 'gif',
'catch': 'catch' //catch and redirect
},
gifs: function(){
console.log('gifs page');
},
gif: function(id){
console.log('gif page', id);
},
'catch': function(){
this.redirectTo('');
}
});
and a app.js file:-
var Router = require('./router.js');
window.app = {
init: function () {
console.log('hello world');
this.router = new Router();
this.router.history.start();
}
};
window.app.init();
and this is all assembled <script src = "bundled.js"></script> in my index.html and package.json code below
"scripts": {
"start": "watchify js/app.js -o bundled.js",
"build": "browserify js/app.js -o bundled.js"
Any help would be really appreciated! Thanks all!
