Multiple Laravel 5 and AngularJS Apps

Question

I'm currently working on a project which has multiple loosely coupled modules (20+) and i have decided to go with Laravel 5 and AngularJs. I'm using yeoman angularify generator for AngularJS. I can't decide on application structure, i would ideally want each sub-module to be a different app as it will be easy for developers to work on separate apps independently.

mylab/
    app/
        Http/
            Controllers/
                SomeController.php # API's that will be used across all apps
        ...
    public/
        bower_components/
            angular/
            bootstrap/
        scripts/
            angular.Modules.js #custom modules to be used across all apps
            ..
    resources/
        views/
            .. #landing page view

    Sub-App1/
        app/
            Http/
                Controllers/
                    SubApp1Controller   #sub-app1 specific API's
            ..
        public/
            bower_components/
                repo1/ #specific to sub-app1
            ...
        resources/
            AngularApp1 #SPA for sub-app1
            views/

    Sub-App2/
        app/
            ...

And for routing, i would like something like :

http://mylabs                                   //login OR landing Page
http://mylabs/subapp/route1/123someid

What is the best way to achieve this in Laravel ?

Is this structure good enough, scalable, manageable ?

If not is there a better way to achieve this ?

Answer 1

For the Laravel routing you can use something like this:

Route::group(['prefix' => 'subapp1'], function()
{
    Route::get('route1/{id}', 'SubApp1Controller@show');
});

Your solution will likely be a pain to manage down the road. It's creating complexity and duplication without buying you much in terms of functionality. I would make sure you have a really good reason for doing it other than being easy for developers to work on independently, because you can still have that with the following approach.

I'd suggest using a single Laravel application to handle all of the routes with a separate controller (or controllers) for each sub app. It will be easier to maintain and still lets developers stay in their own files so they don't conflict with one another. The exception would be routes.php, but you can define the routes up front so the developers aren't all editing it.

I prefer to keep Angular separate from Laravel by putting the Angular code in the public folder, but it depends on how much you're planning to do with Blade vs. Angular. It's hard to say without knowing more about your apps, but you could leave the majority of the work in Angular and Laravel would just send down the initial page.

This avoids Blade vs. Angular expression conflicts and keeps the Angular application decoupled from Laravel. But if you choose to keep Angular in the Laravel views, make sure to handle that somehow. A few common solutions are to change the delimiters from {{ }} or prefix Angular expressions with an @ symbol like so: @{{ user.email }} to prevent Blade from parsing them.

Here's how you could lay out the directory structure:

app/
    Http/
        Controllers/
            AppBaseController.php # API's that will be used across all apps
            SubApp1Controller.php # sub-app1 specific API's
            SubApp2Controller.php # sub-app2 specific API's
    ...
public/
    bower_components/
        angular/
        bootstrap/
    scripts/
        angular.Modules.js # custom modules to be used across all apps
        AngularApp1/ # SPA for sub-app1
        AngularApp2/ # SPA for sub-app2
        ...
resources/
    views/
        ... # landing page view
        sub-app1/
            ... # sub-app1 views
        sub-app2/
            ... # sub-app2 views