0

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?

Mobaz
  • 597
  • 3
  • 10
  • 26

1 Answers1

2

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.

Houssem Fathallah
  • 171
  • 5
  • 16
  • 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? – Mobaz May 15 '15 at 14:29
  • hi Mobaz, use combined (1-2), look at this (http://stackoverflow.com/questions/17777967/using-angularjs-html5mode-with-nodejs-and-express) , use static for serving html , css ... and **app.all("/*", index)** for all direct (browser url). then define your base route client side – Houssem Fathallah May 15 '15 at 14:47
  • 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 – Mobaz May 15 '15 at 15:21
  • * inside your app configuration app.config([......, '$locationProvider', function (....., $locationProvider) { $locationProvider.html5Mode(true); }]); * inside your head html tag , define to specify the angular base root, (https://docs.angularjs.org/error/$location/nobase) – Houssem Fathallah May 15 '15 at 15:35
  • 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!! – Mobaz May 15 '15 at 16:10
  • Heres the resource : //Articles service used for communicating with the articles REST endpoints angular.module('articles').factory('Articles', ['$resource', function($resource) { return $resource('articles/:articleId', { articleId: '@_id' }, { update: { method: 'PUT' } }); } ]); – Mobaz May 15 '15 at 16:11