Custom angularjs route url

Question

Currently I'm using Angular Js routing this way and it's working fine.

config(["$routeProvider", function ($routeProvider, $mdThemingProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '/templates/home.html',
                controller: 'smu72Controller'
            })
       .when('/contact', {
           templateUrl: '/templates/contact.html',
           controller: 'smu72Controller'
       })
            .when('/objects', {
                templateUrl: '/templates/objects.html',
                controller: 'smu72Controller'
            })
            .when('/objects/:objectId', {
                templateUrl: '/templates/object.html',
                controller: 'smu72Controller'
            })
            .when('/services', {
                templateUrl: '/templates/services.html',
                controller: 'smu72Controller'
            })
        .otherwise({
            redirectTo: "/"
        });
    }
    ]);

But with this code I got ugly looking and not seo friendly urls as host/index.html#sectionname, how should I change this to get route url as host/sectionname?

P.S. I'm getting templates to div with ng-view on Index.html page.

Thanks you guys, both answers are correct actually, so I just select oldest one. — andrey.shedko
– andrey.shedko, Commented Apr 11, 2016 at 9:47

manish · Accepted Answer · 2016-04-11 09:52:47Z

1

by using the $locationProvider module and setting html5Mode to true (the use of HTML5 History API) we get rid of the ugly #

config(function($routeProvider, $locationProvider) {
    $routeProvider
            .when('/', {
                 templateUrl: '/templates/home.html',
                 controller: 'smu72Controller'
             })
    /* your all other route specifications */

    $locationProvider.html5Mode(true);
}

edited Apr 11, 2016 at 9:52

answered Apr 11, 2016 at 9:39

manish

1,4588 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dreamweiver Over a year ago

Dont just dump code, try to add some description as well

andrey.shedko Over a year ago

@dreamweiver, you're right, but this answer clear enough.

MiTa · Accepted Answer · 2016-04-11 09:40:50Z

1

By default Angular uses something called hashbang mode, you can turn this off and use HTML5 mode - with this you get nice urls - but it won't work in old browsers. To turn this on, put the line below in the config section of your app - remeber to inject $locationProvider.

$locationProvider.html5Mode(true);

Read more here https://docs.angularjs.org/guide/$location .

answered Apr 11, 2016 at 9:40

MiTa

1,34011 silver badges12 bronze badges

Collectives™ on Stack Overflow

Custom angularjs route url

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related