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 ?

score 6 · Answer 1 · answered Apr 08 '15 at 02:39

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

I agree with your point about complexity, realized that soon enough !.. Found [this](http://ziyahanalbeniz.blogspot.com.tr/2015/03/modular-structure-in-laravel-5.html) , implemented it . It works for now . — Swapnil.C, Apr 08 '15 at 11:24
May I know your views on http://sky.pingpong-labs.com/docs/2.0/modules? This almost looks to be solving the OP's problem — Tamil, Apr 08 '15 at 12:24
@Tamil I haven't used that solution before, but I agree, it solves the OP's problem. It does add an additional dependency, but that's not a problem as long as they maintain it. — Dan H, Apr 08 '15 at 13:11

score 0 · Answer 2 · answered Apr 07 '15 at 08:02

I understand modules as a independent part of the application. And the application to be form by different modules. Each module can have it configuration and routing that may be override on the config of the app. This can be achieved with providers. As the file system structure I recommend read this two links about organizing your app in a modular way here and here. One more thing is to use controllerAs and avoid use of scope in the controller as the scope will disappear on future versions of angular. Another resource is styleguide

Multiple Laravel 5 and AngularJS Apps

2 Answers2