How to handle Express JS and Angular JS routes together?

Question

I am working on a web application using Express, Angularjs. I have a main page (i.e index.html) that i want to serve on express. The code for the server is written in xpressServer.js.

// file tree
->controller
---formController.js
->js
---app.js
->node_modules
->views
---form.html
---home.html
-index.html
-package.json
-xpressServer.js

The above is the file structure of my application.

// xpressServer.js
var express = require('express'); 
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, '/js')));
app.use(express.static(path.join(__dirname, '/controller')));
app.use(express.static(path.join(__dirname, '/views')));

app.get('/', function(req,res) {
    res.sendFile(path.join(__dirname + '/public/assets/view/index.html'));
});

app.listen(8081, function() {
    console.log('listenin on port 8081');
});

And, my index.html is

// index.html
<!DOCTYPE html>
<html ng-app="formModule">
    <head>
        <base href="/" />  
        <title>dfgadfggth</title>
        <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>       
    </head>
    <body>
       <div ng-view></div>
       <script type="text/javascript" src="/js/app.js"></script>       
    </body>
</html>

what exactly do i want to do?

I want to serve the index.html using Express routing and then route using angularjs.<div ng-view></div>.I want to grab a view depending on the route and then place it in ng-view present in the index.html.

The code for the app.js that handles angular routing is:

// app.js
'use strict';

var app = angular.module("formModule",['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider,   $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/home', {
            templateUrl: '/views/home.html'
        })
        .when('/form', {
            templateUrl: '/views/form.html',
            controller: '/controller/formController.js'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

I have been searching for the solution but couldn't find one that worked for me. Kindly help me with this issue.

Thanks in advance!!

If you're using client side routing, you basically need to make all URLs serve `index.html` - that way you don't get a 404 error if you try to navigate straight to one of the views/refresh the page. See: http://stackoverflow.com/questions/26349497/node-express-with-static-html-how-to-route-all-requests-to-index-html — Joe Clay, Feb 27 '17 at 09:42
`app.get('/*', function(req,res) { res.sendFile(path.join(__dirname + '/public/assets/view/index.html')); });` Should i change it this way? — Vijay Varma, Feb 27 '17 at 09:44
Something along those lines would probably work, yes :) Just make sure your catch-all route is the last one you define in your Express app, otherwise it'll override your other routes (like your static assets, etc.) — Joe Clay, Feb 27 '17 at 09:51

How to handle Express JS and Angular JS routes together?

0 Answers0