Angular-routing, direct URL navigation

Question

I have an angular app defined on my index.html file. Using angular-routing i am routing a link named /erez to load a view with a template. It's working inside the app - when I click the link to /erez from the navbar on index.html it works perfectly. But when I go directly to my.site.com/erez on the address bar, it gives 404. I understand why that is, having no server-side code, but is there a pure angular way of achieving direct urls? my routing code:

var app = angular.module('labApp', ['ngRoute', 'angular.filter']);

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'index.html',
            controller: 'mainCtrl'
        }).
        when('/erez', {
            templateUrl: 'erez2.html',
            controller: 'erezCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });

    $locationProvider.html5Mode(true);
});

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

You can find lots of useful information from this link:

So either you need this base url tag inside the tag:

<base href="/" />

But be aware, this base tag may break the relative links in your code. Alternatively you can use:

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

Hope this helps.

edited May 23 '17 at 11:53

Community

1
1

answered Nov 09 '15 at 21:58

LYu

2,316
4
21
38

No luck. I managed to solve with some editing to .htaccess, which is okay for now but it's not elegant. Now I have a problem that base href breaks my carousel on the landing page. Any tips? – DeanLa Nov 09 '15 at 23:04
Like said in the answer, base tag breaks relative path, I presume the carousel is not working due to images can not be found, you can inspect the broken link and see the current broken path and modify it to the correct ones. – LYu Nov 09 '15 at 23:06

score 2 · Answer 2 · answered Nov 09 '15 at 22:32

Try this, it should work now.

var app = angular.module('labApp', ['ngRoute', 'angular.filter']);

    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'index.html',
                controller: 'mainCtrl'
            }).
            when('/erez', {
                templateUrl: 'erez2.html',
                controller: 'erezCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });

        $locationProvider.html5Mode({ enabled: true, requireBase: false });
    });

Angular-routing, direct URL navigation

2 Answers2

Linked