user3078582 user3078582 - 2 years ago 153
AngularJS Question

Angular Template Component With Express JS

I'm trying to load a template file in one of my folders in Angular & I am already calling my JS files statically with Express. For some reason, my template files won't load. I've tried putting them in my views folder with my index.html file(because they are called relative to the .html file), as well as their own folder and made the path the same as when /js is statically called. What should I be doing to override Express routes with my angular template loading route?

i.e.,: templateUrl: '/latest-purchases/latest-purchases.template.html',
& templateUrl: 'latest-purcahses.template.html', //When it was in the same folder as index.html, both wouldn't load.

Express JS File

var express = require('express'),
app = express(),
mongoose = require('mongoose'),
bodyParser = require('body-parser'),
path = require('path');

//Connect Mongoose DB To Database

extended: true


//Use pathjoin: takes care of unecessary delimiters(occurence: pathes from unknown sources)
//i.e.,: 'a','/b' or '/a','b' or 'a','b' etc...
app.use('/bower_components', express.static(path.join(__dirname, '/bower_components')));

app.use('/js', express.static(__dirname + '/client/js'));

app.get('/', function(request, response){
response.sendFile(__dirname + '/client/views/index.html');

app.listen(3000, function() {
console.log("Listening on 3000...");


<body ng-app="financeApp>


<!-- Keep @ Bottom For Better Load Times -->
<script src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/js/app.module.js"></script>
<script type="text/javascript" src="/js/latest-purchases/latest-purchases.module.js"></script>
<script type="text/javascript" src="/js/latest-purchases/latest-purchases.component.js"></script>


component('latestPurchases', {
templateUrl: 'latest-purchases.template.html',
controller: function latestPurchaseController() {
this.purchases = [
name: 'Television',
price: 40.00,
date: 'Septmber 12th, 2014'
}, {
name: 'Skateboard',
price: 50.00,
date: 'October 6, 1993'
}, {
name: 'iPhone',
price: 200.99,
date: 'October 30th, 2014'


<th> Name </th>
<th> Price </th>
<th> Date </th>
<tr ng-repeat="purchase in $ctrl.purchases">


var app = angular.module('financeApp', [

Directory Tree:


Answer Source

I would move the index.html to /client and in server.js, in self.initializeServer = function() I call:'client'));

So, if I go to, it opens the index.html. To include files from subfolders I use this:

<script src="js/latest-purchases/latest-purchases.module.js"></script>

Let us know. If that does not work, I can finalize a github for you. Best.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download