Express/AngularJs "angular is not defined"

我在上课。我正在尝试学习Angular。这节课是关于$http的，由于某些原因，我无法运行一个基本的Expressjs/Angular应用。

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

下面是我的目录结构:

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"时，它显示"angular未定义"。

任何想法?

您需要将您的客户端文件移动到一个文件夹(在本例中为public)，并添加中间件来提供静态文件，然后更正您的路径。

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

从../vendor/angular.js加载Angular

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

但是看看你的文件夹结构，它应该在bower_components。

无论如何，你可以简单地从CDN加载Angular:

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

The Egghead。IO代码有相当多的遗漏。http服务器没有监听任何端口，bodyparser。客户端需要Json中间件和问题。

下面的内容对你有用。

>npm install
>node server

浏览到//localhost: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(保存在/public/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);
          })
    }
});

包。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"
  }
}

检查angular.js库是否也出现404错误，或者为该库添加适当的源代码，使用CDN或使用wer并将其设置为公共目录

相关内容

最新更新

热门标签：