Yii 2: directory structure with AngularJS?

Question

What should the directory structure of my Yii 2 application be? Does it really makes sense to use Yii 2 views or do I have to create an AngularJS application directory and put the Yii application in one of its folders?

What is the explanation?

Answer 1

I recommend you to split your backend (Yii 2) and frontend (AngularJS) in two separate folders. Dead flies and meatballs should be served separately. Yii 2 just provides the server API, while AngularJS does all other things.

project/
  backend/        // Yii2 app
    web/          // Public visible backend folder
      index.php   // Entry point
    config/
    controllers/
    models/
    ...
  frontend/
    app/          // Your AngularJS application here
      css/        // Styles (.less or .css)
      img/        // Images
      lib/        // Third-party libraries such as jQuery or AngularJS
      js/         // .js files (controllers, services, etc.)
      partials/   // Templates (.html)
      index.html
    tests/        // AngularJS tests
    node_modules/
    ...

The web server should be configured this way:

• http://mycoolsite.com/api/* requests to project/backend/web/;
• http://mycoolsite.com/* requests to project/frontend/app/.

If you use Apache as a web server, mod_alias can help you.

Note, that the folder structure inside the backend or frontend directory may vary.

• For backend it depends on which template you prefer (basic or advanced). In my example I used the basic one.
• For frontend it depends on your AngularJS application organization. In the example I used the AngularJS Tutorial App, but for huge applications it is better to use a modular structure.