AngularJs - my view gets reloaded when clicking any link on the index page

Question

I have an AngularJs app with start up page as index.html and I am routing the user to projects page by default. The issue is whenever I click the dropdown-toggle link in my index.html page the projects partial view gets reloaded which shouldn't be. Please see the code below:

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
</head>
<body>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="icon-tasks"></i>
                            <span class="badge badge-grey">4</span>
                        </a> 

<div ng-view></div>
</body>

app.js

 $routeProvider
    .when('/projects',
    {
       controller: 'projectController',
       templateUrl: '/app/views/projects/projects.html'
    })       
    .when('/suppliers',
    {
       controller: 'supplierController',
       templateUrl: '/app/views/suppliers/suppliers.html'
    })       
    .otherwise({ redirectTo: '/projects' });

Also, I tried using $locationProvider.html5Mode(true); to remove the "#" from the URL and the reload got stopped but my url (http://localhost/index.html#/projects) becomes like this http://localhost/projects and I'll get a 404. Any idea how to solve the partial view reload issue?

Don't use anchor tag and use any span tag to achieve style but if you want anchor tag then use ng-click event and in controller try event.preventDefault() — Sai
– Sai, Commented Feb 11, 2014 at 19:07
Thanks for your response but as per @aduch answer ui.router worked for me. — user972255
– user972255, Commented Feb 12, 2014 at 22:41

a-d · Accepted Answer · 2014-02-11 19:06:06Z

1

I strongly recommend you to use ui.router to manage subviews, it seems to suit to your needs here.

github here

A good introduction to ui-router

answered Feb 11, 2014 at 19:06

a-d

10.9k2 gold badges34 silver badges50 bronze badges

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

1 Comment

user972255 Over a year ago

Thanks a lot! I never know about the ui.router plugin but after your guidance I used it and the page reload issue has gone away.

Collectives™ on Stack Overflow

AngularJs - my view gets reloaded when clicking any link on the index page

Index.html

app.js

1 Answer 1

A good introduction to ui-router

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Index.html

app.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related