CODEWITHSUNDEEP
javascriptangularjsnode.jsexpress
Kevin Zeng
Kevin Zeng

Reputation: 13

Configuring Express and Angular

I'm trying to make a simple Angular/Express todo-list app, and I ran into quite a bit of trouble. It's still in the works, but when I ran the code below on localhost:3000 I ended up getting {{ thing }} literally printed in the webpage.

My file paths are:

Here is my code for index.html: 

<!DOCTYPE html>
<html lang="en" ng-app='testApp'>
<head>
    <meta charset="UTF-8">
    <title>Angular-Express Test App</title>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
    <script type='text/javascript' src='js/app.js'></script>
</head>
<body ng-controller='TestCtrl'>
    <table>
        <thead>
            <tr>
                <td>Item</td>
                <td>Remove</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='item in items'>
                <td>{{ item }}</td>
                <td><a href="#"></a>Done?</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Here is my code for index.js:

var express = require('express');
var app = express();
var http = require('http').Server(app);
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.set('port', process.env.OPENSHIFT_NODEJS_PORT || 3000); //yes I plan to deploy to OpenShift
app.set('ipaddr', process.env.OPENSHIFT_NODEJS_IP || "127.0.0.1");


app.get('*', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});

http.listen(3000, function () {
    'use strict';
    console.log('Express server listening on  IP: ' + app.get('ipaddr') + ' and port ' + app.get('port'));
});

And app.js:

angular.module('testApp', ['ngRoute'])
    .controller('TestCtrl', [$scope, function ($scope) {
        'use strict';
        $scope.items = ["foo", "bar"];
    }]);

Here's a screenshot of what I see, though there really isn't much in it that I haven't mentioned already...: http://puu.sh/gyhjT/684fa116f7.png

I spent a ridiculous amount of time trying to figure out what went wrong, so any help at all would be greatly appreciated!

Upvotes: 1

Views: 128

Answers (2)

mido
mido

Reputation: 25054

there are few mistakes in your code,

first , the major one, you are directing every request to index page, so no way to get js/app.js

so change:

app.get('*', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});

to: 

app.get('/', function(req, res){
    res.sendFile(__dirname + '/app/index.html', res);
});


app.get('/js/:file', function(req, res){
    res.sendFile(__dirname + '/app/js/'+req.params.file, res);
});

next is, ngRoute and $scope mistake, ngRoute is not part of angular.min.js, you have to include it seperately, for now, i just changed your js/app.js and it works for me

angular.module('testApp', [])
    .controller('TestCtrl', ['$scope', function ($scope) {
        'use strict';
        $scope.items = ["foo", "bar"];
    }]);

Upvotes: 1

SetupX
SetupX

Reputation: 413

remove ['ngRoute'] because you don't use it. If you want to use, please include angular-route.js in head

Upvotes: 0

Related Questions