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)

Answer 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>