我应该在哪里将Angularjs文件保存在我的Web应用程序中,以及如何构建我的路由和资源?

时间:2021-10-22 11:00:42

I am building a RESTful web service using Laravel and a single page application on the front end with Angluarjs. Now where should I place the Angularjs files? Should I place them in the public folder of the Laravel installation or should I keep them completely separate since the I would be issuing calls to the resources in the web service and it would return JSON data and hence there is no need for them to be in the same place. What is the standard or the best practice?

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

Now, for the second part. How should I manage my routes and resources in Laravel if I am building a simple Todo application. This is where I get really confused and it is a little hard to explain but stay with me for a minute. For example I have a users resource at /users and I can fetch all users by issuing a GET request at /users or create a new users by issuing a POST request at /users. Similarly I can issue a GET request at /users/1 and fetch the first user and so on with other request verbs. Now, I have another resource called tasks. How should I implement this resource? Should I implement it like nested resource say /users/{user_id}/tasks. When I issue a GET request at /users/1/tasks, it will fetch all the tasks for the first user. But now it gets complicated because if issue a GET request at /users/10/tasks/1, should it fetch the first task for the 10th user. But then the implementation of such a logic becomes very difficult as I have to look for the first task of the 10th user.

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

I figured a way around this by only setting a GET route at /users/{user_id}/tasks which will obviously return all the tasks for the specified user. And then I would create a completely different resource /tasks to handle all the other request verbs. Am I doing this right?

我想通过在/ users / {user_id} / tasks中设置GET路由来解决这个问题,这显然会返回指定用户的所有任务。然后我会创建一个完全不同的资源/任务来处理所有其他请求动词。我这样做了吗?

And also what if I am using a NoSQL DB like MongoDB, in which case the data will be stored in such a manner that /users/{user_id}/tasks/{task_id} will not be difficult to implement since the tasks of every user will be in their own JSON object.

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

Am I thinking in the right direction? I am newbie and I don't exactly know what is the standard way to approach such database architecture problems? What are the best practices?

我在想正确的方向吗?我是新手,我不知道解决此类数据库架构问题的标准方法是什么?什么是最佳做法?

3 个解决方案

#1


1  

Here is my suggestion.

这是我的建议。

Basically you need to divide your application into modules. Say for e.g. login, feature 1, feature 2 etc. Now you should have folder for each module where you can keep all the files related to it (controllers.js, services.js, index.html, style.css, filters.js and [name of module].js) THis way you separate all your code which makes it feasible to move your code.

基本上,您需要将应用程序划分为模块。比如说登录,功能1,功能2等。现在你应该有每个模块的文件夹,你可以保存所有与之相关的文件(controllers.js,services.js,index.html,style.css,filters.js和[name]模块] .js)这样就可以将所有代码分开,这样就可以移动代码了。

You can define modules as:

您可以将模块定义为:

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

And you need to include this in the app.js, like this

你需要在app.js中包含这个,就像这样

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

This way you can add all your modules.

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

One more important folder that you would like to include is the common folder. Where you can include modules for all the reusable components that you might have in your application.

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

For testing you can have a separate test folder with (e2e and unit folders) inside it. I have been using cucumber for testing and I have created features folder where I create folders for each module in which I define features. Also you can create a folder named steps where you can have separate js files for each module.

对于测试,您可以在其中包含一个单独的测试文件夹(e2e和单元文件夹)。我一直在使用黄瓜进行测试,我创建了功能文件夹,我为每个模块创建了文件夹,我在其中定义了功能。您还可以创建一个名为steps的文件夹,您可以在其中为每个模块分别使用js文件。

On top of it you can have config file where you can create variables for all your api's so that you can control it from one place.

最重要的是,您可以使用配置文件,您可以在其中为所有api创建变量,以便您可以从一个位置控制它。

Hope this helps :)

希望这可以帮助 :)

#2


1  

Part I

第一部分

This is upto you. If you don’t want to make the raw components publicly visible keep them in separate directories outside public directory.

这取决于你。如果您不希望公开显示原始组件,请将它们保存在公共目录之外的单独目录中。

Part II

第二部分

My opinion is that you should create two resource URI - “/users” and “/tasks”. Treat them as many-to-many entities for future expansion. This way you may also have tasks assigned to multiple users. For example, “electricity bill payment”, shared between you and your partner.

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

To get all users issue GET request to “/users” with PARAM tasks=null. To get all users linked to a set of tasks, GET /users with PARAM tasks=<comma separated taskIds>. GET /users/{user_id} responds with user details and associated tasks. To create one or more user, POST to “/users”.

要让所有用户向PARMS tasks = null发出GET请求给“/ users”。要使所有用户链接到一组任务,请使用PARAM tasks = <逗号分隔的taskids> 的GET /用户。 GET / users / {user_id}响应用户详细信息和相关任务。要创建一个或多个用户,请POST到“/ users”。

Similarly, to get all tasks issue GET request to “/tasks” with PARAM users=null. To get all tasks linked to a set of users, GET /tasks with PARAM users=<comma separated userIds>. GET /tasks/{task_id} will respond with task details and associated users. To add one or more tasks, POST to “/tasks”; optionally send users=<comma separated userIds> else assume current user on server side.

同样,为了让所有任务向PARAM users = null发出GET请求到“/ tasks”。要将所有任务链接到一组用户,使用PARAM用户的GET /任务= <逗号分隔的userids> 。 GET / tasks / {task_id}将响应任务详细信息和关联用户。要添加一个或多个任务,请POST到“/ tasks”;可选地发送users = <逗号分隔的userids> 否则假设服务器端的当前用户。

To make relations between existing tasks and users use PUT /tasks/{task_id} with PARAM users=<comma separated userIds>

要在现有任务和用户之间建立关系,请使用PUT / tasks / {task_id}与PARAM users = <逗号分隔的userids>

#3


0  

Should I place them in the public folder of the Laravel installation or should I keep them completely separate since the I would be issuing calls to the resources in the web service and it would return JSON data and hence there is no need for them to be in the same place.

我应该将它们放在Laravel安装的公共文件夹中,还是应该将它们完全分开,因为我将发出对Web服务中资源的调用,它将返回JSON数据,因此它们不需要它们同一个地方。

First, due to the Same Origin Policy, you should put Angularjs files in the public folder. If you want to put it in another ip:port, then should use JSONP instead of JSON. (related)

首先,由于同源策略,您应该将Angularjs文件放在公用文件夹中。如果你想把它放在另一个ip:port中,那么应该使用JSONP而不是JSON。 (有关)

Now, for the second part.

现在,第二部分。

You're on the right path? It is a matter of opinion. Make experiments. And decide for yourself. As I see it, there is no best practices in matters of design depends on the use cases.

你走在正确的道路上?这是一个意见问题。试点。并自己决定。在我看来,设计问题上没有最佳实践取决于用例。

Either way, I think your approach is not right. You want to open the list of users? No! Another option would be to add a field to the task called "owner", and match the logged in user.

无论哪种方式,我认为你的方法是不对的。您想打开用户列表吗?没有!另一个选项是向名为“owner”的任务添加一个字段,并匹配登录用户。

To remain RESTful, you can use a token or cookie to send the user information without a session.

要保持RESTful,您可以使用令牌或cookie在没有会话的情况下发送用户信息。

#1


1  

Here is my suggestion.

这是我的建议。

Basically you need to divide your application into modules. Say for e.g. login, feature 1, feature 2 etc. Now you should have folder for each module where you can keep all the files related to it (controllers.js, services.js, index.html, style.css, filters.js and [name of module].js) THis way you separate all your code which makes it feasible to move your code.

基本上,您需要将应用程序划分为模块。比如说登录,功能1,功能2等。现在你应该有每个模块的文件夹,你可以保存所有与之相关的文件(controllers.js,services.js,index.html,style.css,filters.js和[name]模块] .js)这样就可以将所有代码分开,这样就可以移动代码了。

You can define modules as:

您可以将模块定义为:

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

And you need to include this in the app.js, like this

你需要在app.js中包含这个,就像这样

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

This way you can add all your modules.

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

One more important folder that you would like to include is the common folder. Where you can include modules for all the reusable components that you might have in your application.

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

For testing you can have a separate test folder with (e2e and unit folders) inside it. I have been using cucumber for testing and I have created features folder where I create folders for each module in which I define features. Also you can create a folder named steps where you can have separate js files for each module.

对于测试,您可以在其中包含一个单独的测试文件夹(e2e和单元文件夹)。我一直在使用黄瓜进行测试,我创建了功能文件夹,我为每个模块创建了文件夹,我在其中定义了功能。您还可以创建一个名为steps的文件夹,您可以在其中为每个模块分别使用js文件。

On top of it you can have config file where you can create variables for all your api's so that you can control it from one place.

最重要的是,您可以使用配置文件,您可以在其中为所有api创建变量,以便您可以从一个位置控制它。

Hope this helps :)

希望这可以帮助 :)

#2


1  

Part I

第一部分

This is upto you. If you don’t want to make the raw components publicly visible keep them in separate directories outside public directory.

这取决于你。如果您不希望公开显示原始组件,请将它们保存在公共目录之外的单独目录中。

Part II

第二部分

My opinion is that you should create two resource URI - “/users” and “/tasks”. Treat them as many-to-many entities for future expansion. This way you may also have tasks assigned to multiple users. For example, “electricity bill payment”, shared between you and your partner.

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

To get all users issue GET request to “/users” with PARAM tasks=null. To get all users linked to a set of tasks, GET /users with PARAM tasks=<comma separated taskIds>. GET /users/{user_id} responds with user details and associated tasks. To create one or more user, POST to “/users”.

要让所有用户向PARMS tasks = null发出GET请求给“/ users”。要使所有用户链接到一组任务,请使用PARAM tasks = <逗号分隔的taskids> 的GET /用户。 GET / users / {user_id}响应用户详细信息和相关任务。要创建一个或多个用户,请POST到“/ users”。

Similarly, to get all tasks issue GET request to “/tasks” with PARAM users=null. To get all tasks linked to a set of users, GET /tasks with PARAM users=<comma separated userIds>. GET /tasks/{task_id} will respond with task details and associated users. To add one or more tasks, POST to “/tasks”; optionally send users=<comma separated userIds> else assume current user on server side.

同样,为了让所有任务向PARAM users = null发出GET请求到“/ tasks”。要将所有任务链接到一组用户,使用PARAM用户的GET /任务= <逗号分隔的userids> 。 GET / tasks / {task_id}将响应任务详细信息和关联用户。要添加一个或多个任务,请POST到“/ tasks”;可选地发送users = <逗号分隔的userids> 否则假设服务器端的当前用户。

To make relations between existing tasks and users use PUT /tasks/{task_id} with PARAM users=<comma separated userIds>

要在现有任务和用户之间建立关系,请使用PUT / tasks / {task_id}与PARAM users = <逗号分隔的userids>

#3


0  

Should I place them in the public folder of the Laravel installation or should I keep them completely separate since the I would be issuing calls to the resources in the web service and it would return JSON data and hence there is no need for them to be in the same place.

我应该将它们放在Laravel安装的公共文件夹中,还是应该将它们完全分开,因为我将发出对Web服务中资源的调用,它将返回JSON数据,因此它们不需要它们同一个地方。

First, due to the Same Origin Policy, you should put Angularjs files in the public folder. If you want to put it in another ip:port, then should use JSONP instead of JSON. (related)

首先,由于同源策略,您应该将Angularjs文件放在公用文件夹中。如果你想把它放在另一个ip:port中,那么应该使用JSONP而不是JSON。 (有关)

Now, for the second part.

现在,第二部分。

You're on the right path? It is a matter of opinion. Make experiments. And decide for yourself. As I see it, there is no best practices in matters of design depends on the use cases.

你走在正确的道路上?这是一个意见问题。试点。并自己决定。在我看来,设计问题上没有最佳实践取决于用例。

Either way, I think your approach is not right. You want to open the list of users? No! Another option would be to add a field to the task called "owner", and match the logged in user.

无论哪种方式,我认为你的方法是不对的。您想打开用户列表吗?没有!另一个选项是向名为“owner”的任务添加一个字段,并匹配登录用户。

To remain RESTful, you can use a token or cookie to send the user information without a session.

要保持RESTful,您可以使用令牌或cookie在没有会话的情况下发送用户信息。