I am following the lessons on egghead.io trying to learn Angular. This lesson is about $http, and for some reason I can’t get a basic Expressjs/Angular app running.
Lesson link: https://egghead.io/lessons/angularjs-http
Here is my directory stucture:
app.js
public/
index.html
main.js
package.json
node_modules/
bower_components/
Here are my files:
public/index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Egghead Videos</title>
<link rel="stylesheet" href="../vendor/foundation.min.css">
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<input type="text" ng-model="app.person.firstName" />
<input type="text" ng-model="app.person.lastName" />
<input type="button" ng-click="app.addPerson(app.person)" />
<ul>
<li ng-repeat="person in app.people">
{{person.firstName}} {{person.lastName}}
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
var express = require('express');
var http = require('http');
var cors = require('cors');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors());
app.set('port', 3000);
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/bower_components'));
var data = [
{"firstName": "Jeff", "lastname": "Winger"},
{"firstName": "Troy", "lastname": "Barnes"},
{"firstName": "Britta", "lastname": "Perry"},
{"firstName": "Abed", "lastname": "Nadir"}
];
app.get('/users', function(req, res) {
res.send(data);
});
app.post('/users', function(req, res) {
res.send(req.body);
});
public/main.js
var app = angular.module("app", []);
app.controller("AppCtrl", function($http) {
var app = this;
$http.get("http://localhost:3000/users")
.success(function(data) {
app.people = data;
})
app.addPerson = function(person) {
$http.post("http://localhost:3000/users", person)
.success(function(data) {
app.people = data;
})
}
})
package.json
{
"name": "users-app",
"description": "users test app",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "latest",
"body-parser": "*",
"cors": "*"
}
}
So I made some changes from last time based on the comments, but it is still not working.
To run it I am typing "node app.js" in the command line. Is that correct, or should I be typing node “public/main.js” to run the app? I am a little confused about that part.
When I type "node app.js" nothing happens and the browser says it can’t connect at localhost. When I type "node public/main.js" it says "angular not defined".
Any ideas?
"../vendor/angular.js"exists. this could be the reason – Mritunjay Jul 9 '14 at 13:09app.listen(3000);in app.js. Then you can connect to localhost:3000 – jonnyynnoj Jul 10 '14 at 15:38