CODEWITHSUNDEEP
angularjsangularjs-routing
user972255
user972255

Reputation: 1828

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

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?

Upvotes: 0

Views: 225

Answers (1)

axelduch
axelduch

Reputation: 10849

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

Upvotes: 1

Related Questions