Angular和express的路由是怎么回事

Posted 2023-05-06

参考技术A 在一个单页面中，我们可以添加多个模块，使得网页只在需要的时候加载这个模块。模块的切换大致上可以代替网页的切换，于是，我们便可以通过模块的切换实现网页的切换，这个切换是按需加载的。 乍一看非常普通的东西，但是仔细想想就可以发现，这种思想可以解决非常多的资源。 例如，假如有一个页面，需要显示1000种商品的信息，每个商品的表现形式各不相同（设他们有各自独立的css和js），那么一般来说，我们就需要准备1000张网页去加载这些信息。但是，使用这种模块化思想，我们就可以仅仅在后台设定1000个各不相同的模块，然后根据需要将需要的商品的对应模块加载到唯一一张页面上而已。 而要做到上面介绍的功能就必须使用路由功能了。 主体思路： 1">Sindre Sorhus</a></p> <p>Part of <a href="todomvc.com">TodoMVC</a></p> </footer> <script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-route/angular-route.js"></script> <script src="js/app.js"></script> </body> </html> 其他的东西都是装饰，只要看第24行就可以了。 在路由区域和视图区域中，我们可以添加内容进去——甚至添加一个网页进去。 接下来请看对应的app.js。 var app = angular.module("myTodo", ['ngRoute']); //路由的配置： app.config(function($routeProvider) var routeconfig = templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ var ohter_config = templateUrl: "other.html" $routeProvider. when("",routeconfig). //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( redirectTo: "/all" ); ); app.controller("myTodoCtrl", function($scope, $routeParams, $filter) console.log($routeParams); ); 如果仅仅使用路由的话，以上的代码就足够使用了。它会保证; 1.当页面停留在主页或者其他奇怪的地方的时候自动跳转到 /all 上面，网址是——127.0.0.1:8020/finishAngularJS-mark2/index.html#/all 只需要注意index后面的就可以了。 2. 当页面跳转方向是/other的时候，跳转到 127.0.0.1:8020/finishAngularJS-mark2/iother.html 上 3. 当出现特定的跳转的时候（这里规定跳转的是/active,/complete/all三个)，也会跳转到对应页面，但这是在index下的跳转—— 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active 127.0.0.1:8020/finishAngularJS-mark2/index.html#/all 127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete 【尤其注意的一点：除了2会跳出这个页面，其他的跳转是显示在规定的视图区和路由区上面的，body网页上的内容会被加载过来。】 接下来我们讲解原理： app.config(function($routeProvider) 这便是用来设定路由的代码，直接写就好 var routeconfig = templateUrl: "body.html", controller: "myTodoCtrl" /*controller: 'myTodoCtrl'*/ var ohter_config = templateUrl: "other.html" 这是两个跳转，跳转是一个对象，templateUrl，即模板是body.html，这就是为什么index.html会加载body.html的原因。第二个参数是为这个模板添加控制器，名字是——myTodoCtrl。 第二个跳转因为不重要所以pass。 $routeProvider. when("",routeconfig). //status ： 它对应我们页面的hash: all completed active //路由规则的优先级按写法的顺序所决定的 when("/other", ohter_config). when("/:aaa", routeconfig ). otherwise( redirectTo: "/all" ); ); 这一段代码是用来进行判断的，当哈希值发生改变的时候，执行对应的跳转对象。 当哈希值为""即第二句，为空的时候，执行routeconfig 当哈希值为"/other",即第五局，执行other_config 当哈希值是一个特殊变量的时候，变量的名称为aaa，值为X（X可以是定义好的任何指，这里是all，complete，active中其中一个），即"/active","/complete","/all"的时候，执行routeconfig。 当哈希值是其他情况的时候，默认跳转到哈希值为"/all"上。 我们得到了哈希值，执行了后面的对象，取出对象的模板，添加在了主页上面，启动了控制器，整个路由便算完成了。 以上就是小编为大家带来的angular.js之路由的选择方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~

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

【中文标题】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 路由器提供了更高级的路由概念，但学习曲线也很陡峭。如果您的应用程序本质上很简单，请使用角度路由