CODEWITHSUNDEEP
angularjs.htaccessyii2
Anton Abramov
Anton Abramov

Reputation: 2331

Yii2 + AngularJS

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

Upvotes: 12

Views: 1601

Answers (4)

Caleb
Caleb

Reputation: 2267

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
}

Upvotes: 1

Salem Ouerdani
Salem Ouerdani

Reputation: 7886

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.

Upvotes: 1

Mihai P.
Mihai P.

Reputation: 9357

Have you enabled pretty urls in the config for the url manager? http://www.yiiframework.com/doc-2.0/guide-runtime-routing.html#using-pretty-urls

Angular has nothing to do with this problem, if you access the URL directly and it is not working then it is something wrong with your configuration.

Upvotes: 0

Brady Liles
Brady Liles

Reputation: 723

Because you are working on the virtual directory (e.g. Alias /site/ "/dir/"), you must use

RewriteBase /site/ in your apache configuration file.

Upvotes: 0

Related Questions