AngularJS - Angular Routing App

Question

I have a Angular Application, in a main.js file i have defined the app routing but i have a doubt, for example, i have a accodion menu of bootstrap, when i click about the next button:

<a href="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>

Due to the angular's configuration routes, the atributte href="#MainMenu", it recognizes it as a route and I not want to do anything.

This is the js code:

angularRoutingApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/customerSearch', {
            templateUrl : 'pages/customer-search.html',
            controller  : 'customerSearchController'
        })      
        .otherwise({
            redirectTo: '/'
        });
});

How could resolved this? thanks, (i'm new in Angular)

Did you set $locationProvider.html5Mode(true) in your app config? — Tom A
– Tom A, Commented Jan 10, 2016 at 15:55

Pankaj Parkar · Accepted Answer · 2016-01-10 16:00:39Z

1

You shouldn't use href attribute to select accordion in your case, because it will change the URL directly as you are using anchor's href. To solve problem you should use data-target attribute instead of href

Markup

<a data-target="#MainMenu" data-toggle="collapse" data-parent="#MainMenu" class="dropdown-toggle">
   <img src="img/ico_menu_off.png" />
</a>

answered Jan 10, 2016 at 16:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

squaleLis · Accepted Answer · 2016-01-10 16:02:06Z

1

You can remove the href and open it with JavaScript on click:

$("#MainMenuTrigger").click(function(){
     $('#MainMenu').modal();
});

http://getbootstrap.com/javascript/#js-programmatic-api

I suggest you also to give a look to Angular UI Bootstrap.

answered Jan 10, 2016 at 16:02

squaleLis

6,5242 gold badges25 silver badges32 bronze badges

Comments

Hady Allam · Accepted Answer · 2016-01-10 16:20:48Z

1

you could remove hash from URL. find this URL it will help you http://www.codeproject.com/Tips/1063634/Removing-the-sharp-Sign-from-AngularJS-URLs-with-I

answered Jan 10, 2016 at 16:20

Hady Allam

1289 bronze badges

Collectives™ on Stack Overflow

AngularJS - Angular Routing App

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related