配置Express和Angular

我正在嘗試製作一個簡單的Angular/Express待辦事項列表應用程序，並且遇到了相當多的麻煩。它仍在工作中，但是當我在localhost：3000上運行下面的代碼時，我最終在網頁上打印了{{thing}}。配置Express和Angular

我的文件路徑是：

應用
- JS
  - app.js
- 的index.html
node_modules（這裏存在的角度，表達等）
index.js
的package.json

這裏是我的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>

這裏是我的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')); 
});

和app.js：

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

這裏是我所看到的截圖，雖然真的是沒有太多在裏面，我沒有已經提到...：http://puu.sh/gyhjT/684fa116f7.png

我花了很多時間可笑量試圖找出什麼地方出了錯，所以任何幫助都將不勝感激！

來源

2015-03-13 Kevin Zeng

打開的瀏覽器控制檯，來看看錯誤消息 – 2015-03-13 08:33:39

https://jsfiddle.net/tjhack/mgf4ohq5/1/剛剛嘗試過這一點，它的工作原理。像以前的評論檢查控制檯一樣，你可能在服務器端有錯誤 – tjhack 2015-03-13 08:39:10

你確定你的路徑是正確的嗎？好像你的控制器沒有加載。我嘗試在這個plunker：http://plnkr.co/edit/GIP5zAIPYDtB4LOJSBGK?p=preview和它的工作... – Carnivorus 2015-03-13 08:47:05

有在你的代碼一些錯誤，

第一，主要的一個，你是指導每個請求索引頁，所以沒辦法得到js/app.js

所以更改：

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

到：

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

其次是，ngRoute和$scope錯誤，ngRoute不是angular.min.js一部分，你必須包括它分開，現在，我只是改變了你的js/app.js和它的作品對我來說

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

來源

2015-03-13 08:47:51 mido

感謝您的回覆！我應用了您所做的更改，但頁面仍然以{{item}}形式打印出來，就像我在上面的puush鏈接中那樣。 – 2015-03-13 08:59:43

你的控制檯說什麼？同樣，文件是在正確的位置，現在你的html必須在'project_root/app /'文件夾和'app_js'在'project_root/js /'文件夾中。 – mido 2015-03-13 09:03:06

沒什麼。我沒有得到任何錯誤，並從'DEBUG = express：* nodemon index.js'運行它沒有給出任何錯誤。 GET成功了/app/js/app.js。編輯：我將文件移動到正確的目錄，現在它的工作。非常感謝！ – 2015-03-13 09:08:16

刪除['ngRoute']，因爲你不使用它。如果你想使用，請在頭角route.js

來源

2015-03-13 08:32:53 SetupX

感謝您的回覆！我嘗試了mido22的解決方案，其中包括取出'ngRoute'，但這並沒有解決問題。你有什麼建議嗎？ – 2015-03-13 09:00:29

配置Express和Angular

回答

相關問題