我应该将 Angularjs 文件保存在我的 Web 应用程序中的啥位置，我应该如何构建我的路由和资源？ [关闭]

Posted 2023-03-14

【中文标题】我应该将 Angularjs 文件保存在我的 Web 应用程序中的啥位置，我应该如何构建我的路由和资源？ [关闭]

【英文标题】：Where should I keep the Angularjs files in my web application and how should I structure my routes and resources? [closed]我应该将 Angularjs 文件保存在我的 Web 应用程序中的什么位置，我应该如何构建我的路由和资源？ [关闭]

【发布时间】：2014-11-26 05:26:46

【问题描述】：

我正在使用 Laravel 构建一个 RESTful Web 服务，并在前端使用 Angluarjs 构建一个单页应用程序。现在我应该在哪里放置 Angularjs 文件？我应该将它们放在 Laravel 安装的公用文件夹中，还是应该将它们完全分开，因为我将调用 Web 服务中的资源，它会返回 JSON 数据，因此不需要它们同一个地方。标准或最佳做法是什么？

现在，第二部分。如果我正在构建一个简单的 Todo 应用程序，我应该如何在 Laravel 中管理我的路由和资源。这是我真正感到困惑的地方，有点难以解释，但请陪我一分钟。例如，我在 /users 有一个用户资源，我可以通过在 /users 发出 GET 请求来获取所有用户，或者通过在 /users 发出 POST 请求来创建新用户。同样，我可以在 /users/1 发出 GET 请求并获取第一个用户，依此类推，并使用其他请求动词。现在，我有另一个资源，称为任务。我应该如何实现这个资源？我应该像嵌套资源说 /users/user_id/tasks 那样实现它吗？当我在 /users/1/tasks 发出 GET 请求时，它将获取第一个用户的所有任务。但是现在它变得复杂了，因为如果在 /users/10/tasks/1 发出 GET 请求，它是否应该为第 10 个用户获取第一个任务。但是这样一个逻辑的实现变得非常困难，因为我必须寻找第 10 个用户的第一个任务。

我想出了一个解决方法，只在 /users/user_id/tasks 设置一个 GET 路由，这显然会返回指定用户的所有任务。然后我会创建一个完全不同的资源/任务来处理所有其他请求动词。我这样做对吗？

如果我使用像 MongoDB 这样的 NoSQL DB，在这种情况下，数据将以 /users/user_id/tasks/task_id 不会难以实现的方式存储，因为任务每个用户都将在他们自己的 JSON 对象中。

我的想法是否正确？我是新手，我不完全知道解决此类数据库架构问题的标准方法是什么？最佳做法是什么？

【问题讨论】：

将 angularjs 文件和 Laravel 文件分开保存，这样您的应用程序的耦合度就会降低。此外，如果您需要部署多个前端服务器以实现可扩展性，您可以轻松完成。它还有其他几个优点。

这要么过于宽泛，要么主要基于意见。专注于一个问题。 “我应该把 AngularJS 文件放在哪里？” “什么是标准或最佳实践”？ “如果我正在构建一个简单的应用程序，我应该如何管理我的路线？” “我这样做对吗”？ “还有，如果我使用的是 NoSQL DB 怎么办？” “我想的方向对吗？” “解决此类数据库架构问题的标准方法是什么？最佳实践是什么？”问题太多，注意力不够，征求意见。

【参考方案1】：

我应该将它们放在 Laravel 安装的公共文件夹中还是应该完全保留它们 分开，因为我将调用 Web 服务中的资源并且它会返回 JSON 数据，因此无需将它们放在同一个位置。

首先，由于Same Origin Policy，您应该将Angularjs文件放在公共文件夹中。 如果你想把它放在另一个 ip:port 中，那么应该使用 JSONP 而不是 JSON。 (related)

现在，第二部分。

您走在正确的道路上吗？这是一个见仁见智的问题。试点。并自己决定。在我看来，在设计方面没有最佳实践取决于用例。

不管怎样，我认为你的方法是不对的。您要打开用户列表吗？不！另一种选择是向名为“所有者”的任务添加一个字段，并匹配登录用户。

要保持 RESTful，您可以使用 token or cookie 在不使用会话的情况下发送用户信息。

【参考方案2】：

这是我的建议。

基本上，您需要将应用程序划分为模块。例如说登录、功能 1、功能 2 等。现在您应该为每个模块创建一个文件夹，您可以在其中保存与其相关的所有文件（controllers.js、services.js、index.html、style.css、filters.js 和 [name of module].js) 这样您就可以分离所有代码，从而可以移动您的代码。

您可以将模块定义为：

(function () 
    'use strict';
    angular
        .module('myapp.login', [
            'myapp.login.controllers',
            'myapp.login.services'
        ]);
());

而且你需要在 app.js 中包含这个，像这样

angular
    .module('myapp', [ 'ngRoute',
    'ngResource',
    'myapp.login'
])

这样您可以添加所有模块。

您想要包含的另一个重要文件夹是公共文件夹。您可以在其中包含应用程序中可能拥有的所有可重用组件的模块。

对于测试，您可以有一个单独的测试文件夹，其中包含（e2e 和单元文件夹）。我一直在使用 cucumber 进行测试，并创建了 features 文件夹，在其中为我定义功能的每个模块创建文件夹。您还可以创建一个名为 steps 的文件夹，您可以在其中为每个模块创建单独的 js 文件。

在它之上，您可以拥有配置文件，您可以在其中为所有 api 创建变量，以便您可以从一个地方控制它。

希望这会有所帮助:)

【参考方案3】：

第一部分

这取决于你。如果您不想让原始组件公开可见，请将它们放在公共目录之外的单独目录中。

第二部分

我的意见是你应该创建两个资源 URI——“/users”和“/tasks”。将它们视为多对多实体以供将来扩展。这样，您还可以将任务分配给多个用户。例如，您和您的合作伙伴共享的“电费支付”。

要让所有用户使用 PARAM tasks=null 向“/users”发出 GET 请求。要将所有用户链接到一组任务，请使用 PARAM tasks=逗号分隔的 taskIds> 获取 /users。 GET /users/user_id 以用户详细信息和相关任务进行响应。要创建一个或多个用户，请 POST 到“/users”。

同样，要获取所有任务，请向“/tasks”发出 GET 请求，其中 PARAM users=null。要获取链接到一组用户的所有任务，请使用 PARAM users=逗号分隔的 userIds> 获取 /tasks。 GET /tasks/task_id 将响应任务详细信息和相关用户。要添加一项或多项任务，请 POST 到“/tasks”；可选地发送 users=逗号分隔的 userIds> 否则假定当前用户在服务器端。

要在现有任务和用户之间建立关系，请使用 PUT /tasks/task_id 和 PARAM users=逗号分隔的 userIds>