Use hash without #! in angularjs without router

Question

I need to create my own router like code in angularjs because I need to add routes dynamically using simple plugins system. I have navigation like this:

<ul>
    <li><a href="#page1">page1</a></li>
    <li><a href="#page2">page2</a></li>
</ul>

and my controller look like this:

app.controller('main', function($scope) {
    let set = () => {
        this.panel = location.hash.replace(/^#/, '');
    };

    $(window).on('hashchange', () => {
        $scope.$apply(set);
    });
    set();
});

I will show different panel depend on controller panel property.

but when I click on the link I've got #!#page1 how can I prevent #!# and have #page1 as hash? Or maybe just #!/page1 (but without adding router) because when I'm adding href="page1" I've got normal link to page that don't exists (outside of angular).

write $locationProvider.html5Mode(true); in .config() block — xkeshav
– xkeshav, Commented Aug 10, 2017 at 17:30
Possible duplicate of AngularJS routing without the hash '#' — Kyle
– Kyle, Commented Aug 10, 2017 at 17:50
@WilliamHampshire that different question because I don't use router. — jcubic
– jcubic, Commented Aug 10, 2017 at 17:57
@DanielBeck as I've said in the question I need to add plugins, dynamic routes, so I do that by injecting components in html using twig. I can't use ui-router or ng-router because all routes need to be defined in config and I don't want to create js file as twig template because I'm using webpack. — jcubic
– jcubic, Commented Aug 10, 2017 at 18:20

V31 · Accepted Answer · 2017-08-10 17:33:16Z

2

Thats the hash bang you need to remove (#!). For that you need to add base tag in the index.html of yours

<base href="/">

and set @locationProvider html mode to true, for example:

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true); //activate HTML5 Mode
});

the last # i.e. (#page1) would be there as you are setting the id to traverse to that section

answered Aug 10, 2017 at 17:33

V31

7,6643 gold badges28 silver badges44 bronze badges

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

2 Comments

jcubic Over a year ago

Now the problem is that href="/logout" don't redirect but use history API to change url.

jcubic Over a year ago

In order to make normal ulrls work you need to add ng-click="$event.stopPropagation()"

Collectives™ on Stack Overflow

Use hash without #! in angularjs without router

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related