Express/AngularJs“角度未定义”

我正在关注egghead.io上的课程，试图学习Angular。本课是关于$ http的，出于某种原因，我无法运行基本的Expressjs/Angular应用程序。Express/AngularJs“角度未定义”

课程链接：https://egghead.io/lessons/angularjs-http

这里是我的目录stucture：

app.js 
public/ 
    index.html 
    main.js 
package.json 
node_modules/ 
bower_components/

这里是我的文件：

公共/ 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); 
});

公共/ 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": "*" 
    } 
}

所以我做了基于该评论最后一次了一些变化，但它仍然没有工作。

要运行它，我在命令行输入“node app.js”。这是正确的，还是应该键入节点“public/main.js”来运行应用程序？我对这部分有点困惑。

当我输入“node app.js”时，没有任何反应，浏览器说它不能在本地主机上连接。当我输入“node public/main.js”时，它会显示“未定义角度”。

任何想法？

来源

2014-07-09 Caleb

确保' “../供应商/ angular.js”'存在。这可能是 – Mritunjay

你缺少'app.listen（3000）;'in app.js的原因。然后你可以连接到本地主机：3000 – noj

Egghead.io代码有不少遗漏。 http服务器未在任何端口上侦听， bodyparser.json中间件是必需的，并且在客户端上有问题。

以下内容适用于您。

>npm install 

>node server

，浏览到本地主机//：3000

文件结构：

server.js (I prefer instead of app.js for Node/Express server code) 
public/index.html 
     /js/app.js 

package.json 
node_modules/

SERVER.JS

/* ========================================================== 
External Modules/Packages Required 
============================================================ */ 
var express = require('express'); 
var http = require('http'); 
var cors = require('cors'); 
var bodyParser = require('body-parser'); 
var logger = require('morgan'); 

/* ========================================================== 
Create a new application with Express 
============================================================ */ 
var app = express(); 

/* ========================================================== 
serve the static index.html from the public folder 
============================================================ */ 
app.use(express.static(__dirname + '/public')); 

/* ========================================================== 
Use Middleware 
============================================================ */ 
//app.use(bodyParser.urlencoded({ 
// extended: true 
//})); 

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

app.use(cors()); 
app.use(logger('dev')); 

/* ========================================================== 
Port the server will listen on 
============================================================ */ 
app.set('port', 3000); 


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); 
}); 

/* ========================================================== 
Bind to a port and listen for connections on it 
============================================================ */ 
var server = app.listen(app.get('port'), function() { 
    console.log('Listening on port %d', server.address().port); 
    console.log("========LISTENING On Port 3000=========") 
});

INDEX.HTML

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="utf-8"> 
    <title>Egghead.io</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
</body> 
</html>

个

APP.JS（下/公/ JS保存）

/*================================================ 
Module 
================================================*/ 
var app = angular.module("app", ['ngRoute']); 

/*================================================ 
Controller 
================================================*/ 
app.controller("AppCtrl", function($http, $scope) { 

    var app = this; 

    $http.get("http://localhost:3000/users") 
     .success(function(data, status, headers) { 
     console.log("http status code= "+status); 
     console.log("data from server= "+JSON.stringify(data)); 
     app.people = data; 
     }) 

    app.addPerson = function(person) { 

     $http.post("http://localhost:3000/users", app.person)   
      .success(function(data, status, headers) { 
      console.log("http status code= "+status); 
      console.log("data from server= "+JSON.stringify(data)); 
      app.people.push(data); 
      console.log("new app.people= "+ app.people); 
      }) 

      .error(function(data, status, headers, config) { 
      console.log("Error with post" + status); 
      }) 
    } 
});

的package.json

{ 
    "name": "Angular-HTTP-Example", 
    "version": "0.0.1", 
    "description": "From Egghead Example", 
    "main": "node server.js", 
    "author": "Mick", 
    "dependencies": { 
    "express": "4.2.0", 
    "morgan": "~1.0.1", 
    "body-parser": "~1.0.2" 
    } 
}

来源

2014-07-12 16:01:40

真棒米克，工作很棒！所以我错过了Angular路由，并在一个端口上收听。 – Caleb

您负荷角度从../vendor/angular.js

<script type="text/javascript" src="../vendor/angular.js"></script>

但看着你的文件夹结构应该是bower_components。

反正你可以简单地加载角从CDN：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>

来源

2014-07-09 13:08:05 Gpx

感谢您的帮助Gpx，但它仍然无法正常工作。我对上面的代码做了一些修改。有任何想法吗？ – Caleb

在浏览器控制台中是否有错误？ – Gpx

您需要将您的客户端文件移动到（在这个例子中public）的文件夹，并添加中间件为静态文件，然后正确你的路径。

app.use(express.static(__dirname + '/public')); 
app.use(express.static(__dirname + '/bower_components'));

来源

2014-07-09 13:15:03

谢谢本。我将它添加到我的app.js文件中，但仍然无法正常工作。看到我上面的代码编辑。 – Caleb

检查，如果你也越来越404错误的angular.js库或添加适当的源库，使用CDN或使用闺房，然后将其设置为公共目录。

来源

2014-07-09 13:39:11

嘿阿肖克，谢谢你试图帮助，但它仍然无法正常工作。看到我上面的代码编辑。 – Caleb

如果你只学习js角色，你可以把你所有的代码放到apache服务器或nginx服务器中，并且摆脱为设置一个节点服务器来提供静态http文件的麻烦。 –

Express/AngularJs“角度未定义”

回答

相关问题