アングルコードがエクスプレスで動作しない

角度に問題があります。私の角度コードはうまく動作しますが、私はそれを単独で実行しますが、エクスプレスでlocalhostでアクセスするとうまくいきません。何が起こるかは、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: ''}; 
    }; 
});

あるとangularised 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>

ある

出典

2016-10-21 Mikyas TADESSE

あなたは静的コンテンツを配信するようには明言していませんhttps://expressjs.com/en/starter/static-files.html –

あなたのHTMLを求めている助けてくださいjavascripts/tiks.jsの場合はscriptタグがありますが、サーバーにはサービスを提供するように構成されたルートがありません。

たとえば、Google Chrome Developer tools network tabを使用してリクエストを確認してみてください。.jsファイルが要求されたときに、おそらく404エラーが表示されます。

./app/client/main.htmlのように特定のリソースを個別に定義するのではなく、express.staticを使用してフォルダからファイルを提供する必要があります。

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

これにアクセスするには、http://localhost/main.htmlにアクセスする必要があります。

出典

2016-10-21 22:32:26

固定ファイルhttps：/を処理するためのミドルウェアを使用して修正する方法を提案する必要があります/expressjs.com/en/starter/static-files.html –

@JuanMendes true、done。それを指摘してくれてありがとう:) –

あなたの返信の10倍どのように私はルートを追加するのですか？ –

アングルコードがエクスプレスで動作しない

答えて

関連する問題