MEAN Stack路由误解答案

【问题标题】：MEAN Stack routing misunderstandingMEAN Stack路由误解
【发布时间】：2016-03-01 16:21:19
【问题描述】：

我正在使用 Riot 的开发者 API 创建一个英雄联盟网站。

我知道如何设置路由，但我对某些事情感到困惑，哪些页面/url 由快速路由处理，哪些页面/url 由 angular 处理？有人可以帮我举个例子吗？我已经在这里待了几个星期了，但没有运气。所以我会喜欢 website.com/player/playerName 将通过该玩家名称搜索 riot 的开发者 api 并为该页面提取统计信息。

感谢我能得到的任何帮助

【问题讨论】：

您可以安装许多不同的 MEAN 脚手架项目，通常使用 Yoeman，它们将提供简单的工作应用程序供您参考
他们都可以。您选择处理哪些。

标签： javascript angularjs node.js express mean-stack

【解决方案1】：

Express 将处理服务器端路由，Angular 将处理任何客户端路由。

服务器端路由使用服务器端编译器生成网页，然后将网页代码发送到浏览器进行渲染。当服务器（Express/Node）接收到请求时会发生这种情况，这通常通过您的 index.js（在路由目录中）或 routes.js，您有一些代码来路由该请求：

app.get('/', function (req, res) {
  res.send('root');
});

您可以在此处了解有关 Express 路由的更多信息：http://expressjs.com/en/guide/routing.html

客户端路由正在使用 Javascript 来更改现在加载到浏览器中的已呈现代码。所以所有这些路由都发生在浏览器中。 Angular 在其路由系统中使用模板，因此您可以在用户导航时加载不同的模板，而无需强制浏览器加载新页面。您的角度路由将位于公共目录中的 app.js 中，路由代码如下所示：

angular.module('pathApp',[] ,function($routeProvider, $locationProvider){
  $routeProvider
  .when('/Book/Delete', {
    template: '<div class="box" ng-class="classname">Delete</div>',
    controller: function($scope) {$scope.classname="delete"}
  })
  .when('/Book/Show', {
    template: '<div class="box" ng-class="classname">Show</div>',
    controller: function($scope) {$scope.classname="show"}
  })
  .otherwise({redirectTo: '/Book/Error'});
  $locationProvider.html5Mode(true);        
});

您可以在此处了解有关角度路由的更多信息： https://docs.angularjs.org/api/ngRoute/service/$route

【讨论】：