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!!
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: stackoverflow.com/questions/26349497/…app.get('/*', function(req,res) { res.sendFile(path.join(__dirname + '/public/assets/view/index.html')); });Should i change it this way?