Yii2 + AngularJS

Question

I have a problem with integrating Angular and Yii2 I have 2 parts:

1. Regular Yii2 app
2. Controller which starts with actionIndex and work with Angular

The problem is, when i copy and paste url in Angular part i always get 404 error. Angular config is

.config(function($routeProvider, $locationProvider) {
    base = '/construct/';
    $routeProvider.when(base+':className', {
      templateUrl: '/construct/builder',
      controller: 'BuilderCtrl',
      reloadOnSearch: false
    }).otherwise({
      templateUrl: '/construct/heroes',
      controller: 'HeroesCtrl'
    });

    $locationProvider.html5Mode(true);
  });

So, how can i make direct links in HTML5 mode work to see proper pages? Path like "/construct/something" doesn't work. My htaccess is:

RewriteEngine on

# If a directory or a file exists, use the request directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Otherwise forward the request to index.php
RewriteRule . index.php

Answer 1

htaccess file looks correct but if you have your webserver's DocumentRoot and your webapp in separate folders, you will need to start by setting the RewriteBase path in your htaccess file somthing like this if using a unix based OS:

RewriteEngine on

RewriteBase /~userName/pathToYourYiiProject/web

# If a directory or a file exists, use the request directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Otherwise forward the request to index.php
RewriteRule . index.php

if you don't get results when acceding to the path manually from your navigator then you will need to check if pretty urls are activated first :

'urlManager' => [
                'class' => 'yii\web\UrlManager',
                'enablePrettyUrl' => true,
                'showScriptName' => false,
            ],

(check Mihai's link for yii official documentation)

check also if rewrite_module is activated in your apache configs. to enable and load the mod_rewrite in a linux OS you will have to launch those scripts :

$ cat /etc/apache2/mods-available/rewrite.load
$ sudo a2enmod rewrite
$ ls -al /etc/apache2/mods-enabled/rewrite.load

finally remember that recent Apache versions (from 2.3.9) have "AllowOverride None" by default, you will have to change it to "AllowOverride All" in /etc/apache2/apache2.conf (again path in linux OS dont know if its the same in other OS). restart your apache server & recheck manually the path in your navigator, if you get json format results, then your back-end is working fine & angularJs should be able to communicate with it.

Answer 2

The problem is that your WebServer must serve the AngularJS index view for all paths that begin with /construct/. Here's a solution for a URL Rule in Yii2 that does just that:

In your config/main.php

'components' => [
    // other components here
    'urlManager' => [
        // other URL Manager settings here
        'rules' => [
            'construct/<path:(.*)>'=>'construct/index',
        ],
    ],
]

In your controllers/ConstructController.php:

public function actionIndex($path = '/')
{
    // serve your angularJS index page here
}