Using HTML5 with Angularjs and Node/Express and the MEAN.js boilerplate

Question

I'm using the mean.js (http://meanjs.org/generator.html) boilerplate as a starting point for an app, as I love the inbuilt authentication/authorization.

However, I'm having a problem with using HTML5.

In my angular app i've set HTML5(true) and I know that I need to set up a catchall route for all the other requests to be redirected.

I have the following routes on my express as the root and catchall:

///this is the app/controllers/core.server.controller:

exports.index = function(req, res) {
    res.render('index', {
        user: req.user || null,
        request: req
    });
};

exports.catchall = function(req, res){
      res.redirect('/');
};

And then the routing itself

'use strict';
module.exports = function(app) {
    // Root routing
    var core = require('../../app/controllers/core.server.controller');
    app.route('/').get(core.index);
    app.route('*').get(core.catchall);
};

now the pages are redirecting no problem when I enter routes that are just garbage, but when I enter a route that exists in express (with no associated view I'm getting server output).

Here is the route i mean for express:

'use strict';
/**
 * Module dependencies.
 */
var users = require('../../app/controllers/users.server.controller'),
    articles = require('../../app/controllers/articles.server.controller');

module.exports = function(app) {
    // Article Routes
    app.route('/articles')
        .get(articles.list)
        .post(users.requiresLogin, articles.create);

    // Finish by binding the article middleware
    app.param('articleId', articles.articleByID);
};

I have no view associated with this in Express/Node - just in Angular.

so when I navigate to localhost:3000/articles via a link the angular manages the route and renders the correct angular template.

However, when enter localhost:3000/articles and press enter (or refresh the browser on this url) I get the following:

[{"_id":"5555ede9dac9d0d99efae164","user":{"_id":"5554fa21141c5aef7b0354d7","displayName":"heny as"},"__v":0,"content":"This is the blurb for him","title":"VP, Global Marketing","created":"2015-05-15T13:00:25.177Z"}]

but I want to get getting the rendered page template from angular

Can anyone help?

Houssem Fathallah · Accepted Answer · 2015-05-15 14:27:22Z

2

This is because you call the server url (wich is the same used for ajax calls), you need to

Either intercept request type in the server side (ajax | not ajax) and redirect all no ajax to root path (/) and angular will use ajax to get articles in client side.
Define a single root (/) for serving your single web application and use (/api/...) to handle all your ajax requests.

answered May 15, 2015 at 14:27

Houssem Fathallah

1815 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mobaz Over a year ago

Hi Hossam - thanks for this - if I got with 1 then all non ajax i.e. direct page refreshes will go to '/' but I want them to reload the existing page - would 2 achieve that?

Houssem Fathallah Over a year ago

hi Mobaz, use combined (1-2), look at this (stackoverflow.com/questions/17777967/…) , use static for serving html , css ... and app.all("/*", index) for all direct (browser url). then define your base route client side

Mobaz Over a year ago

I'm currently serving static using app.use(express.static(path.resolve('./public'))); - but that doesn work - do I need to define each one specifically? also could you provide an example of the client side base route with ui-router? thanks

Houssem Fathallah Over a year ago

* inside your app configuration app.config([......, '$locationProvider', function (....., $locationProvider) { $locationProvider.html5Mode(true); }]); * inside your head html tag , define <base href="/"> to specify the angular base root, (docs.angularjs.org/error/$location/nobase)

Mobaz Over a year ago

OK - got it redirecting the page reloads to the correct view, but now the resource output is giving me "Error in resource configuration. Expected response to contain an array but got an object" - which isnt rendering the data i need!!

|

Collectives™ on Stack Overflow

Using HTML5 with Angularjs and Node/Express and the MEAN.js boilerplate

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related