将HTML5与Angularjs和Node / Express以及MEAN.js样板一起使用

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?

Answer 1

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

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

2. Define a single root (/) for serving your single web application and use (/api/...) to handle all your ajax requests.