Where should I keep the Angularjs files in my web application and how should I structure my routes and resources?

Question

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?

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.

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?

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.

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?

Answer 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.

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

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.

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.

Hope this helps :)

Answer 2

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.

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”.

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.

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

Answer 3

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.

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)

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.

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