Express Serverを使用したAngularJSルート

私はAngular routesとExpressを一緒に使い始めました。ルートリンクをクリックするとURLは変わりますが、何も起こりません。ここに私のコードがあります.hrefをクリックすると、私のURLが "http://localhost:3000/#!#%2Fhome"のように変わり、何も起こりません。私は "/"と "＃"を使わずにhrefを変更しようとしましたが、何も変わりませんでした。Express Serverを使用したAngularJSルート

<html> 
<head> 
    <base href="/" /> 
    <meta charset="utf-8"> 
    <title>Squared</title> 
    <link rel="stylesheet" href="/css/skeleton.css"> 
    <link rel="stylesheet" href="/css/style.css"> 
</head> 
<body> 
    <div class="app-wrapper" ng-app = "myapp"> 
    <div class="row app"> 
    <div class="left"> 
     <div class="left-search-wrapper"> 
      <input type="text" name="search-bar" value="" placeholder="Search"> 
     </div> 
     <div class="left-image-wrapper"> 
      <img src="images/profilepic.png" class="left-image"> 
     </div> 
     <div class="left-menu-wrapper"> 
      <ul> 
       <li><a href="#/home">Home</a></li> 
       <li><a href="#/messages">Messages</a></li> 
       <li><a href="#/friends">Friends</a></li> 
       <li><a href="#/settings">Settings</a></li> 
      </ul> 
     </div> 

    </div> 
    <div class="columns eight right"> 
     <div ng-view></div> 

     <script type="text/ng-template" id= "home.html"> 
     <h2>Home</h2> 
     </script> 
     <script type="text/ng-template" id= "messages.html"> 
     <h2>messages</h2> 
     </script> 
     <script type="text/ng-template" id= "friends.html"> 
     <h2>friends</h2> 
     </script> 
     <script type="text/ng-template" id= "settings.html"> 
     <h2>settings</h2> 
     </script> 
    </div> 
    </div> 
    </div> 



<script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
<script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script> 
<script type="text/javascript" src="app.js"></script> 
</body> 
</html>

これは、これは私のExpressは、これは私のプロジェクトディレクトリの組織です

var express = require("express"); 
var app = express(); 
var path = require("path"); 


app.use(express.static(__dirname)); 

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

routeHandler(app); 
app.listen(3000);

をserver.jsである私のapp.js

var app = angular.module("myapp", ["ngRoute"]); 
app.config(["$routeProvider", function($routeProvider){ 
$routeProvider 
    .when("/home", { templateUrl: "home.html"}) 
    .when("/messages", { templateUrl: "messages.html"}) 
    .when("/friends", { templateUrl: "friends.html"}) 
    .when("/settings", { templateUrl: "settings.html"}); 
}]);

です：

ルートフォルダ
- index.htmlを
- app.js
- server.js
- node_modules
- 画像
- CSS

出典

2016-12-31 PazzoTotale

[angularjs 1.6.0（最新のもの）のルートは動作しません]（http://stackoverflow.com/questions/41211875）/angularjs-1-6-0-latest-now-routes-not-working） – georgeawg

につながることができます前に、「HREF」を、以下のことから、むしろ「HREF」よりも「NG-HREF」を使用する必要があります

app.get('/home', function(req, res){ 
res.render('home.html') 
})

出典

2016-12-31 12:15:24 PazzoTotale

-1

テンプレートURLを定義して、サーバーにそれを処理ページをレンダリングします。

.when("/home", { templateUrl: "/server/home"})

あなたのサーバー側でURLがルーティングされ、一致する必要があります。そして、あなたが結合解決されていないok悪いリンク

出典

2016-12-31 11:06:00

それはまだ動作しません、同じパスで私をリダイレクトし、何も変更しません。 – PazzoTotale

templateUrlを正しく定義していない可能性があります。 'そしてこのapp.getをurのメインページに入れてください。 –

問題は、私はビューのために単一のファイルを使用していない可能性がありますか？ – PazzoTotale

あなたserver.jsで、今それは動作します。私は "$ locationProvider.html5Mode（true）;"を追加して問題を解決しました。今すぐ別の問題があります。私はURLをリロードすると「メッセージを受け取れません」というメッセージが表示されます。

出典

2016-12-31 11:13:32 digit

あなたのヒントを試しましたが、まだ動作しません。 – PazzoTotale

app.get（ '/ home'、function（req、res）{console.log（ "here"） res.render（ 'home.html'） }コントロールがそこに到達しているかどうかを確認してください。 –

@sacDahal、ルート自体が壊れていますので、そこに到達するにはまずURLをエンコードする必要があります。この前に1つのhttp://stackoverflow.com/questions/16630912/angular-js-route-doesnt-match-component-with-2f-encoded – digit

Express Serverを使用したAngularJSルート

答えて

関連する問題