Angular 和 Express 路由如何在 mean.js 应用程序中协同工作？

Posted 2023-03-07

【中文标题】Angular 和 Express 路由如何在 mean.js 应用程序中协同工作？

【英文标题】：How does Angular and Express routing work together in a mean.js app?

【发布时间】：2015-12-07 13:01:09

【问题描述】：

我正在为 Angular 和 Express 路由而苦苦挣扎（顺便说一下，我对 Express 有点陌生），我一直在使用 Angular 处理路由——使用 ui-router——但现在我开始构建一个MEAN.js 应用程序我注意到我可以处理服务器端路由和客户端路由......这就是让我感到困惑的原因，这是我的一些问题：

它们有何不同？ 如果我切换到 Express 路由，我还会有 SPA 吗？ 我可以同时使用两者吗？如何？这是好习惯吗？有什么好处吗？ 什么时候应该只使用其中一种？ 我将如何处理路由参数？ 等等……

如果有人能详细解释这些问题，以及人们需要知道的其他额外信息，我将不胜感激。

另外，我想知道的是：我只需要在 Express 中设置服务器，还是需要在 Node 中编写代码？

【问题讨论】：

简而言之，express处理url中#符号之前的地址路由。 Angular 在# 符号之后处理地址的路由

好问题。

【参考方案1】：

Express 中的路由与 Angular 中的路由明显不同

快递中

路由是指定义端点 (URI) 到一个 应用程序以及它如何响应客户端请求。

因此，如果您使用 angularjs 进行路由，则无需使用 express 为您的 html 模板设置路由。

您只需使用 express 来创建您的 RESTAPI，然后使用 angularjs $http 或 $resource 使用这些 API

总结：

Angular 中的路由支持 SPA 背后的理念。最终，您希望通过 Angular 处理基于 UI 的路由更改（即不需要服务器调用/逻辑）。任何到达后端并最终需要服务器逻辑的路由更改都应使用 Express 路由。

示例

这是创建rest API的快速路由。

app = express();

app.get('/dowork',function(res,req)
    console.log(req.params.msg);
  /... code to do your work .../
);

现在在 angularjs 调用中工作

$http.get('http://localhost:8080/dowork',"msg":"hi").success(function(data)
 console.log(data);
);

【讨论】：

有道理，你能举个例子，只是为了更清楚。

【参考方案2】：

这里只有两美分。其他专家应该纠正我并进一步解释：

前端路由通常是指#后面的url中的路由管理。 这是因为 # 之后的任何内容都会被浏览器忽略。因此，Angular 使用它来进行动态 ajax 调用并根据 # 之后的路由路径获取资源。

express 处理的是 # 之前的 url。这用于从浏览器向服务器发出实际请求。

它们有何不同：已回答

如果我切换到 Express 路由，我还会有 SPA：

如果您在前端手动管理 url，同时进行 ajax 调用以填充您的单个页面，则您始终可以拥有 SPA。在前端管理 url 应该以可读性为目的。

可以同时使用吗？如何？ ：

每个人都使用两者。 SPA 也同时使用两者。通常，基于身份验证的事物由快速路由处理，而授权和其他基于路由的交互，如请求资源等，则使用前端路由。即使你使用前端路由，对于后台的ajax请求，你仍然依赖于express的路由。

这是好的做法吗？它有什么好处吗？ ：

使用 express 的路由进行身份验证和提供资源，并在前端使用 angular 路由来保持 SPA 的运行始终是一个好习惯。

我什么时候应该只使用其中一个？ : 回答

我将如何处理路由参数？ ：

前端使用路由参数（如果使用 ng-route）和后端使用 slug、bodyparser 等处理参数。 你需要花一些时间来学习这些。

【讨论】：

只是一个附加信息：在 HTML5 中使用 pushState、replaceState API，甚至 # 都可以省略。例如：在 somedomain.com/a/c 中，/a/c 可以在客户端使用这些 API 进行处理。

是的@Harikrishnan...感谢您的加入。

非常通俗易懂的英语，最适合像我这样的傻瓜。如果解释 Express 和 Angular 2+ 会更好。我的猜测是后者现在可以完全取代 Express。

【参考方案3】：

我们可以同时使用吗

当然，您可以同时使用两者。根据您的应用程序要求，您的应用程序的哪些部分需要成为 spa 以获得更好的用户体验，以及哪些部分视图需要由您的 express 应用程序呈现。

如果我切换到 Express 路由，我还有 SPA 吗？

如果某个特定的路由不是由 Angular 处理的，并且您想通过 express 应用程序生成视图，您可以这样做。如果您想开发一个完整的水疗中心，那么您需要在您的 express 应用程序中开发一个 api（http 端点）来响应您的 angular 应用程序的 AJAX 请求。角度路由都是关于 clint 侧路由的，用于生成模板并从服务器（在您的情况下为 express）获取数据并呈现视图。在您对快速路由的所有角度路由调用以获取 json 数据或任何模板以给人一种水疗中心的印象

例子

我们有快递

app.get("/", function (req, res) 
    res.render("home");
);

您的主页必须包含所有 Angular 脚本文件以初始化 Angular 应用程序

在你可以拥有的 clint 端代码中

var app = angular.module("myApp", ["ui.router"])
    .config(function ($stateProvider, ) 

        $stateProvider.state("home", 
            url: "/"
        )
         .state("manas", 
              url: "/manas",
              templateUrl: "/templates/manas.html"
              // when the state or url is manas its fetch the static  manas.html from server and inject that  to ui view
            )

// i am using angular UI router here

可以同时使用吗？如何？这是好习惯吗？有什么好处吗？

是的，我们可以同时使用两者。这取决于您的应用程序逻辑，使用两者都没有害处或好处。

什么时候应该只使用其中一种？ 仅当您更关心搜索引擎优化时才使用快速路由。因为 SPA 默认情况下对搜索引擎不友好，所以您需要采取一些额外的措施来使其对搜索引擎友好。

我将如何处理路由参数？ 这取决于您使用的角度路由。我的意思是香草角度路由或 UI 路由。但两者的概念是相同的

传递参数

通过 UI 路由将参数传递给服务器 https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

对于 UI 路由，请点击此链接 https://github.com/angular-ui/ui-router/wiki

如果您的应用程序不是更复杂，您就不会关心嵌套视图子视图等 我的建议是使用有角的普通路由。 毫无疑问，UI 路由器提供了更高级的路由概念，但学习曲线也很陡峭。如果您的应用程序本质上很简单，请使用角度路由