Angular UI router request URL

Question

I have an Angular APP using UI Router.

.config(function($stateProvider) {

    $stateProvider
        .state('blog', {
            url: '/blog',
            templateUrl: 'assets/javascript/blog/blog.html',
            controller: 'BlogCtrl',
            controllerAs: 'vm'
        })
});

If I press a link with ui-sref="blog" , the app load the blog view, but If I open in a new tab myapp/blog , it trows me 404 error.

Ps. I'm using HTML5 mode to remove the /#/

Update:

I have separate file for each route, in app.js I use

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise('home');
    $locationProvider.html5Mode(true);
});

And have the <base href="/"> in the <head />

I'm doing something wrong? Can someone please explain?

Answer 1

For this to work on refresh/reload you need to properly set up a .htaccess file or similiar in your root and enable rewrite engine.

Something like this should work.

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Angular UI router request URL

Question

1 answers

solution1
3 2016-03-10 14:12:08

Angular UI router request URL

Question

1 answers

solution1 3 2016-03-10 14:12:08

solution1
3 2016-03-10 14:12:08