AngularJS使用Express Server进行路由

Question

我已经一起开始使用Angular路线和Express。 当我单击路由链接时，URL更改但什么都没有发生，这是我的代码。当我单击href时，它用类似“ http：// localhost：3000 /＃！＃％2Fhome ”的内容更改了我的URL发生。 我曾尝试更改没有“ /”和“＃”的href，但没有任何改变。

<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>

这是我的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"});
 }]);

这是我的Express server.js

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

这是我的项目目录组织：

根文件夹
- index.html
- app.js
- server.js
- node_modules
- 图片
- 的CSS

Answer 1

您应该使用“ ng-href”而不是“ href”，因为在解析绑定之前跟随“ href”可能会导致错误的链接

Answer 2

好的，现在可以了。 我通过添加“ $ locationProvider.html5Mode（true）;”解决了该问题。 现在还有另一个问题：当我重新加载URL时，我收到“无法获取消息”

Answer 3

定义模板网址，并在您的服务器中处理它并呈现页面。

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

该网址应在您的服务器端进行路由和匹配。 并在您的server.js中

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

AngularJS使用Express Server进行路由

问题描述

3 个解决方案

解决方案1
0 2016-12-31 11:13:32

解决方案2
0 已采纳 2016-12-31 12:15:24

解决方案3
-1 2016-12-31 11:06:00

AngularJS使用Express Server进行路由

问题描述

3 个解决方案

解决方案1 0 2016-12-31 11:13:32

解决方案2 0 已采纳 2016-12-31 12:15:24

解决方案3 -1 2016-12-31 11:06:00

解决方案1
0 2016-12-31 11:13:32

解决方案2
0 已采纳 2016-12-31 12:15:24

解决方案3
-1 2016-12-31 11:06:00