AngularJS 使用 Express Server 路由答案

【问题标题】：AngularJS routes with Express ServerAngularJS 使用 Express Server 路由
【发布时间】：2023-03-22 12:28:01
【问题描述】：

我已经开始使用 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

【问题讨论】：

angularjs 1.6.0 (latest now) routes not working的可能重复

标签： javascript angularjs node.js express routes

【解决方案1】：

定义一个模板 URL 并在您的服务器中处理它并呈现页面。

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

url 应该在你的服务器端路由和匹配。在你的 server.js 中

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

【讨论】：

它仍然不起作用，它将我重定向到相同的路径并且没有任何改变
你可能没有正确定义 templateUrl 尝试 '/home' 并将这个 app.get 放在你的主页中。
问题可能是我没有为视图使用单个文件？

【解决方案2】：

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

【讨论】：

app.get('/home', function(req, res){ console.log("here") res.render('home.html') } consoleand检查控件是否到达有没有
@sacDahal，路线本身已损坏。他需要先对 url 进行编码才能到达那里。尝试使用 html5 模式或以编程方式对 url 进行编码。以前已经有类似的问题了。 1 个stackoverflow.com/questions/16630912/…

【解决方案3】：

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

【讨论】：