Laravel and AngularJS views structure

Question

I recently started to digg in to angularjs, and would help me a lot with my new project, but im stucked with the view structure part.

So what i dont really understand is, how to build it up. Is it okay if i create html angular partials and not creating laravel views, so laravel would only handle the database instert fecth edit delete, and the angular partial views would handle the result show, and forms.

So my buold up would look like this. My assets folder

/css
/img
/js
 /lib
 /partials
         /home
             index.html
         /users
             users.html
             details.html

And creating restful controllers for them what handlets listed above

Or if someone could show my a basic exaple about this, just the controller and view part, how to build up a singple page with showing result, and one with grabing by id i would really be grateful.

Thank you

Answer 1

When starting a Laravel & AngularJS project you are in charge of the backend and frontend. Basically you have 3 options.

1. Keep the entire app in the same folder, and the angularjs stuff in the public folder.
2. Keep the entire app in the same folder and AngularJS views in the laravel view folder.
3. Separate your backend and frontend completely.

The first & second option are the simplest, and its OK if you have a small/medium sized application. In this case just keep all the AngularJS files in the public folder, or if you choose to mix them with laravel views just drop the .blade extension (or change the laravel blade/angularjs template syntax)

I see its best to keep the backend as restful as possible when doing a SPA app, the point is to push the logic to the browser, this means your app can become a mess if you mix php with js too much.

The folder structure is totally up to you, and it does not matter what option you choose. But a good start is separating you app into a logical parts.

/app
    application.js
    /partials
         user.html
         login.html
         etc.html
    /vendor
         Angular.js
         Lodash.js
         Etc.js
    /controllers
         User.js
         Etc.js
    /directives
         Charts.js
         Etc.js
    /filters
         Custom.js
         Etc.js
    /services
         Backend.js
         Etc.js

You can also check this for a good angularjs styleguide.

The above is a basic folder structure, just customize it as you see best. If you have a small app, you could drop the folders and just have a controllers.js directives.js and services.js (etc)and keep all your javascript in the same file. This is totally up to you. Separate when the application grows, and always refactor.

If you choose the third option you will have to customize the backend a bit. This might be the hardest option, but it also gives you great flexibility. Basically you could drop laravel all together, and build the backend in node.js, or use laravel as a backend for another SPA app written in Ember.js without making any changes in the code. Note if you are choosing this option you cannot make use of some laravel stuff, like the blade templating. You will also have to setup your laravel app for CORS, and note, there can be some more coding when it comes to security, like CSRF tokens and such.

When going to production with you app you can use a build tool to min & concat you frontend app into one file. Checkout ng-min for minification.