CODEWITHSUNDEEP
javascriptangularjs
Hiero
Hiero

Reputation: 2205

Angular UI router request URL

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?

Upvotes: 0

Views: 69

Answers (1)

jonassvensson
jonassvensson

Reputation: 491

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

Upvotes: 3

Related Questions