Angular partials not working

144 views Asked by At

I never had this problem before and I know this is a tiny issue... but I can't seem to figure out what is wrong... 1 of my partials is not loading correctly and instead it hits the otherwise route back to my /login (which I have assigned). Every time I click on the Create a survey link it redirects me back to the login and the URL displays this http://localhost:3000/#!/login#%2Fcreate but when I put http://localhost:3000/#!/create in the URL it works. Not quite sure what the problem is. Please HELP!

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider){
 $routeProvider
 .when('/login', {
  templateUrl: 'partials/login.html',
  controller: 'UserController'
 })
 .when('/dashboard', {
  templateUrl: 'partials/dashboard.html',
  controller: 'SurveyController'
 })
 .when('/create', {
  templateUrl: 'partials/create.html',
  controller: 'SurveyController'
 })
 .when('/poll/:id', {
  templateUrl: 'partials/poll.html'
 })
 .otherwise({
  redirectTo: '/login'
 });
})
<!DOCTYPE html>
<html>
<head>
 <title>Survey Polls</title>
 <!-- CSS -->
 <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 <!-- Angular -->
 <script src="angular/angular.js"></script>
 <script src="angular-route/angular-route.js"></script>
 <!-- jQuery/Bootstrap -->
 <script src="jquery/dist/jquery.js"></script>
 <script src="bootstrap/dist/js/bootstrap.js"></script>
 <!-- App.js -->
 <script src="app.js"></script>
 <!-- Controllers/Factories -->
 <script src="controllers/SurveyController.js"></script> 
 <script src="controllers/UserController.js"></script>
 <script src="factories/SurveyFactory.js"></script>
 <script src="factories/UserFactory.js"></script>
</head>
<body ng-app="myApp">
 <div class="container">
  <div ng-view></div>
 </div>
</body>
</html>




<a href="#/create">Create a new survey</a>

<h3>Current polls:</h3>

<table border="1">
 <thead>
  <tr>
   <th>Name</th>
   <th>Survey Question</th>
   <th>Date Posted</th>
   <th>Action</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="s in surveys">
   <td>{{ s._user.username }}</td>
   <td>{{ s.question }}</td>
   <td>{{ s.created_at }}</td>
   <td><button ng-show="loggedInUser._id == s._user._id" ng-click="delete(s._id)">Delete</button></td>
  </tr>
 </tbody>
</table>

2

There are 2 answers

2
Mickers On

I found a possible solution here. Add this line to your config to get rid of the exclamation point (!):

$locationProvider.hashPrefix('');
3
shireef khatab On

Try to use ng-href instead of just href.