使用客户端路由的正确方法是什么？答案

【问题标题】：What is the proper way of using client-side routing?使用客户端路由的正确方法是什么？
【发布时间】：2015-06-04 03:02:14
【问题描述】：

我有一个关于 AngularJS 和 Node.js 的问题。
我有一个 Web 应用程序，我使用带有 routeProvider 的客户端路由来浏览我的 Web 应用程序的页面。
我通过 RESTful API 服务器端获取数据。但是所有的逻辑都是在 AngularJS 中完成的，因为有了客户端路由，我在 Node.js 中所做的只是：

exports.partials = function(req, res, err) {
    var name = req.params.name;
    res.render(name);
};

所以，我只使用 Node.js 来渲染模板布局和局部视图，但所有逻辑都在 AngularJS 中。它的使用方法是否正确？

【问题讨论】：

标签： javascript angularjs node.js express

【解决方案1】：

Angular.js 是一个 JavaScript 框架，用于创建 SPA 或单页应用程序。

它使用 url 中的 hash(#) 或 hashbang(#!) 创建自己的导航系统，以表示应用程序的不同状态或页面，但所有这些都发生在您的主页中。浏览器永远不会切换到另一个页面，因为所有应用程序状态都会在页面刷新时丢失（HTTP 是一种无状态协议）。

通常你需要 3 个部分来创建一个 Angular 应用程序，每个部分都有自己的路由系统。

您的 Angular 应用程序：所有脚本和资源都加载到主页中。路由系统由 $routeProvider 和 hash(#) 提供。例如：http://mywebsite/#/products 或 http://mywebsite/#/providers。所有这些都与您的主页相关。
您的模板：这是使用 ajax 检索的，并且可以根据需要进行路由，例如：http://mywebsite/product.html 或 http://mywebsite/templates/product.html 提供静态 html 文件，甚至 http://mywebsite/templates/products 使用 restful 方法和服务器端路由机制。这里没有一般规则，因为基本上取决于所选的服务器技术和您自己的设计。
您的数据：通常是一个 Resful API，为您的应用程序提供存储在数据库中的业务数据。 Rest 创建了一些您必须遵循的基本规则，例如将所有内容视为资源并使用动词对其进行操作。例如：GET http://mywebsite.com/api/products 或 POST http://mywebsite.com/api/providers

这是一个 Angular 路由提供者的示例

.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/Book/:bookId/ch/:chapterId', {
            templateUrl: 'chapter.html',
            controller: 'ChapterController'
        });

在这种情况下，Angular 最初会从 http://mywebsite.com 获取您的主页，并从位于 http://mywebsite.com/chapter.html 的 chapter.html 文件的内容中获取模板，以及从您为 $http 服务设置的任何配置中获取的数据。只要您以不相互冲突的方式设置路线，您就是安全的。在您的情况下，您可以使用 express.js 为您的模板创建一个宁静的路由系统，或者直接从公共文件夹作为 html 提供它们。

【讨论】：