Angular and Express routing with html5mode enabled

Question

So my question is: how could I make angular and express routing work together with html5mode enabled? When I change state from '/' to my admins state I get list of all admins and everything is fine until I refresh my page. Then I get only json result of admins but my view disappears. I copied only peace of code which is relevant - to make it shorter, there is no syntax errors.

Any help is appreciated. Thanks.

My file structure:

+-- client
|   app
|       admin.config.js
|       admin.js
|       admin.module.js
|   assets
|   views
|       admin
|           admin-edit.ejs
|           admin-list.ejs
|   lib
|       bower components
+-- server
|   routes
|       index.js
|       admins.js
|   models
|       Admin.js
|   config
|       dbconfig.js
|   server.js

In my Angular module.config I have:

function config($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('admins', {
            url        : '/admins',
            templateUrl: '/views/admin/admin-list.ejs',
            controller : 'AdminController',
            resolve    : {
                loginRequired: loginRequired,
                getAdminList : getAdminList
            }
        });

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/admins');

My server.js file looks like:

/* Routes */
var routes = require('./routes/index');
var auth   = require('./routes/auth');
var users  = require('./routes/users');
var admins = require('./routes/admins');


var app = express();


/*************************************
 App initialization
 **************************************/

/* Auto increment mongoose plugin */
autoIncrement.initialize(connection);

/* Auth secret code*/
app.set('superSecret', dbconfig.SECRET);


/* View engine setup */
app.set('views', path.join(__dirname, '../client/views'));
app.set('view engine', 'ejs');


// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'client', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static('client'));

app.use('/', routes);
app.use('/auth', auth);
app.use('/users', users);
app.use('/admins', admins);

My index route looks like:

var express = require('express');
var router  = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
    res.render('index');
});


module.exports = router;

I tried adding this into my server.js

app.get('*', function (req, res){
        res.sendFile(path.join(__dirname + '/client/index.ejs'));
});

and in this case when I refresh page while my url is /admins I get downloaded index page.

I also tried adding in my index.js route

router.get('*', function (req, res) {
   res.render('index');
})

and as result of adding this is endless loop in my admins list.

In my index.ejs I have

<meta charset="utf-8">
<base href="/">

Community · Accepted Answer · 2017-05-23 12:31:15Z

0

That's a lot of code. I want to give you this. It is an answer I posted yesterday that I am proud of. It is a simple example of Angular routing in Angular 1.5. You will have to add your line about $locationProvider.html5Mode(true); because I am not using it.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 4, 2016 at 1:47

Jeff Diederiks

1,38014 silver badges20 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:50:41Z

0

After some time I found solution here, instead of specific pages I added asterisk (*) to every get request I made so now my auth route looks like:

router.route('/signup')

    /* Render index by default */
    .get(function (req, res) {
        res.render('index', {
            page: req.params.page
        });

    });

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Apr 6, 2016 at 16:33

tadija

233 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular and Express routing with html5mode enabled

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related