【问题标题】:Angular code not working with expressAngular 代码不适用于 express
【发布时间】:2017-03-04 08:01:12
【问题描述】:

我遇到了角度问题。我的角度代码在我单独运行时工作正常,但当我在本地主机上使用 express 访问它时不起作用。发生的情况是它单独显示 html 文件。 我的服务器代码是: *

var express = require('express'),
    app     = express();
app.get('/', function(req, res) {
    res.sendfile('./app/client/main.html');
});
app.listen(3000, function() {
    console.log('I\'m listening...');
})

我的角度控制器代码是

var app = angular.module('tiks', []);

app.controller('mainController', function($scope){

     $scope.posts = [];
     $scope.newPost = {created_by: '', text: '', create_at: ''};

      $scope.post = function(){
        $scope.newPost.created_at = Date.now();
        $scope.posts.push($scope.newPost);
        $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
});

角度化的html代码是

<!--main.html-->
<!doctype html>
<html>
  <head>
    <title>Tiks</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="javascripts/tiks.js"></script>
  </head>
  <body ng-app="tiks">
    <div id='main' ng-controller="mainController">
     <form ng-Submit="post()">
        <input required type="text" placeholder="Your name" ng-model="newPost.created_by" /> 
        <textarea required maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"></textarea>
        <input class="button" type="submit" value="Chirp!" />
      </form>
      <div id="post-stream">
        <h4>Tiks Feed</h4>
              <div class='post' ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'">
            <p>{{post.created_by}} says {{post.text}} at {{post.created_at}}</p>
            </div>
        </div>
      </div>
    </div>
  </body>
</html>

请帮忙

【问题讨论】:

标签: javascript html angularjs express


【解决方案1】:

您的 HTML 在 script 标记处请求 javascripts/tiks.js,但您的服务器没有配置路由来提供它。

尝试检查正在完成的请求,例如使用Google Chrome Developer tools network tab,当请求.js 文件时,您可能会看到404 错误。

您应该使用express.static 从文件夹中提供文件,而不是像为./app/client/main.html 那样单独定义特定资源。

app.use('/', express.static(__dirname + '/app/client/'));

那么您必须访问http://localhost/main.html 才能访问它。

【讨论】:

  • 你应该建议如何修复它,即使用中间件处理静态文件expressjs.com/en/starter/static-files.html
  • 10x 为您的回复我如何添加路线?
  • hmmm,好的,我使用/ 参数进行了编辑以使其更清晰
  • 我添加了 app.use(express.static('./app/client/javascripts'));到我在服务器上的代码,但没有运气
  • 您是否像现在一样使用/ 参数? (我编辑了答案)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-01-19
  • 2019-08-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多