user3078582 user3078582 - 5 months ago 17
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
mongoose.connect('mongodb://localhost:27017/finance');

app.use(bodyParser.urlencoded({
extended: true
}));

app.use(bodyParser.json());

//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...");
});


index.html

<body ng-app="financeApp>

<div>
<latest-purchase></latest-purchase>
</div>

<!-- 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>
</body>
</html>


latest-purchases.component.js

angular.
module('latestPurchases').
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'
}
];
}
});


latest-purchase.template.html

<table>
<tr>
<th> Name </th>
<th> Price </th>
<th> Date </th>
</tr>
<tr ng-repeat="purchase in $ctrl.purchases">
<td>{{purchase.name}}</td>
<td>{{purchase.price}}</td>
<td>{{purchase.date}}</td>
</tr>
</table>


app.module.js

var app = angular.module('financeApp', [
'latestPurchases'
]);


Directory Tree:

/app
/server.js
/client
/js
/latest-purchases
/latest-purchases.component.js
/latest-purchases.component.spec.js
/latest-purchases.template.html.js
/latest-purchases.module.js
/views
/index.html
/app.module.js

Answer

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

self.app.use(express.static('client'));

So, if I go to http://127.0.0.1:8080/, 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.

Comments