Маршрутизация не работает в AngularJS

Question

Маршрутизация не работает для index.html. Это даже дает ошибку компилятора. Index.html - моя стартовая страница. Через ссылку «Информация о заголовке» откроется страница Add Header.html. Я добавил весь код в plunkr [ "https://plnkr.co/edit/w9eWiHKvSDrf0viERgoX?p=preview"]

app.js

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

// configure our routes 
MyApp.config(function ($routeProvider) { 
    $routeProvider 

     // route for the home page 

     .when('/', { 
      templateUrl: 'AddHeader.html', 
      controller: 'headerCtrl' 
     }) 


     .when('/AddHeader', { 
      templateUrl: 'AddHeader.html', 
      controller: 'headerCtrl' 
     }) 

     // route for the about page 
     .when('/ProjectIDCreation', { 
      templateUrl: '/ProjectIDCreation.html', 
      controller: 'headerCtrl' 
     }) 


}); 

HeaderCtrl.js

var app = angular.module('MyApp'); 
var baseAddress = 'http://localhost:49754/api/TimeSheet/'; 
var url = ""; 

//var app = angular.module('MyApp'); 
//app.controller('mainController', function ($scope) { 
// console.log('mainController'); 

//}); 

app.factory('userFactory', function ($http) { 
    return { 
     getHeadersList: function() { 
      url = baseAddress + "FetchHeaderDetails"; 
      return $http.get(url); 
     }, 
     addHeader: function (user) { 
      url = baseAddress + "InsertHeaderDetails"; 
      return $http.post(url, user); 
     }, 
     updateHeader: function (user) { 
      url = baseAddress + "UpdateHeaderDetails"; 
      return $http.put(url, user); 
     } 
    }; 
}); 


//var app = angular.module('MyApp'); 
app.controller('headerCtrl', function PostController($scope, userFactory) { 
    $scope.users = []; 
    $scope.user = null; 
    $scope.editMode = false; 

    //Fetch all Headers 
    $scope.getAll = function() { 
     userFactory.getHeadersList().success(function (data) { 
      $scope.users = data; 
     }).error(function (data) { 
      $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage; 
     }); 
    }; 
    //Add Header 
    $scope.add = function() { 
     var currentUser = this.user; 
      userFactory.addHeader(currentUser).success(function (data) { 
       $scope.addMode = false; 
       currentUser.HeaderID = data; 
       $scope.users.push(currentUser); 
       $scope.user = null; 
       $('#userModel').modal('hide'); 
      }).error(function (data) { 
       $scope.error = "An Error has occured while Adding user! " + data.ExceptionMessage; 
      }); 
    }; 
    //Edit Header 
    $scope.edit = function() { 
     $scope.user = this.user; 
     $scope.editMode = true; 
     $('#userModel').modal('show'); 
    }; 

    //Update Header 
    $scope.update = function() { 
     var currentUser = this.user; 
     userFactory.updateHeader(currentUser).success(function (data) { 
      currentUser.editMode = false; 

      $('#userModel').modal('hide'); 
     }).error(function (data) { 
      $scope.error = "An Error has occured while Updating user! " + data.ExceptionMessage; 
     }); 
    }; 
    //Model popup events 
    $scope.showadd = function() { 
     $scope.user = null; 
     $scope.editMode = false; 
     $('#userModel').modal('show'); 
    }; 
    $scope.showedit = function() { 
     $('#userModel').modal('show'); 
    }; 
    $scope.cancel = function() { 
     $scope.user = null; 
     $('#userModel').modal('hide'); 
    } 
    // initialize your users data 
    $scope.getAll(); 
}); 

Answer 1

Убедитесь, что путь к файлу, который вы использовали в тегах сценария, является правильным. Который в plnkr был неправильным. Кроме того, я обнаружил, что у вас есть два модуля, которые не позволяют это делать. Также вы импортируете угловые, jquery, bootstrap более одного раза, не делайте этого. Ниже исправленный код

Edited plnkr

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

// configure our routes 
app.config(function ($routeProvider) { 
    $routeProvider 
     // route for the home page 
     .when('/', { 
      templateUrl: 'AddHeader.html', 
      controller: 'headerCtrl' 
     }) 
     .when('/AddHeader', { 
      templateUrl: 'AddHeader.html', 
      controller: 'headerCtrl' 
     }) 
     // route for the about page 
     .when('/ProjectIDCreation', { 
      templateUrl: 'ProjectIDCreation.html', 
      controller: 'headerCtrl' 
     }) 
}); 


var baseAddress = 'http://localhost:49754/api/TimeSheet/'; 
var url = ""; 

app.factory('userFactory', function ($http) { 
    return { 
     getHeadersList: function() { 
      url = baseAddress + "FetchHeaderDetails"; 
      return $http.get(url); 
     }, 
     addHeader: function (user) { 
      url = baseAddress + "InsertHeaderDetails"; 
      return $http.post(url, user); 
     }, 
     updateHeader: function (user) { 
      url = baseAddress + "UpdateHeaderDetails"; 
      return $http.put(url, user); 
     } 
    }; 
}); 


//var app = angular.module('MyApp'); 
app.controller('headerCtrl', function PostController($scope, userFactory) { 
    $scope.users = []; 
    $scope.user = null; 
    $scope.editMode = false; 

    //Fetch all Headers 
    $scope.getAll = function() { 
     userFactory.getHeadersList().success(function (data) { 
      $scope.users = data; 
     }).error(function (data) { 
      $scope.error = "An Error has occured while Loading users! " + data.ExceptionMessage; 
     }); 
    }; 
    //Add Header 
    $scope.add = function() { 
     var currentUser = this.user; 
      userFactory.addHeader(currentUser).success(function (data) { 
       $scope.addMode = false; 
       currentUser.HeaderID = data; 
       $scope.users.push(currentUser); 
       $scope.user = null; 
       $('#userModel').modal('hide'); 
      }).error(function (data) { 
       $scope.error = "An Error has occured while Adding user! " + data.ExceptionMessage; 
      }); 
    }; 
    //Edit Header 
    $scope.edit = function() { 
     $scope.user = this.user; 
     $scope.editMode = true; 
     $('#userModel').modal('show'); 
    }; 

    //Update Header 
    $scope.update = function() { 
     var currentUser = this.user; 
     userFactory.updateHeader(currentUser).success(function (data) { 
      currentUser.editMode = false; 

      $('#userModel').modal('hide'); 
     }).error(function (data) { 
      $scope.error = "An Error has occured while Updating user! " + data.ExceptionMessage; 
     }); 
    }; 
    //Model popup events 
    $scope.showadd = function() { 
     $scope.user = null; 
     $scope.editMode = false; 
     $('#userModel').modal('show'); 
    }; 
    $scope.showedit = function() { 
     $('#userModel').modal('show'); 
    }; 
    $scope.cancel = function() { 
     $scope.user = null; 
     $('#userModel').modal('hide'); 
    } 
    // initialize your users data 
    $scope.getAll(); 
}); 

Answer 2

<li><a href="#!/AddHeader"></i>AddHeader</a></li> 
<li><a href="#!/ProjectIDCreation"></i>ProjectIDCreation</a></li> 

(в .html не забываете /)

.config(
      [ '$locationProvider', '$routeProvider', 
       function config($locationProvider, $routeProvider) { 
        $locationProvider.hashPrefix('!'); 
          .when('/AddHeader', { 
           templateUrl: 'AddHeader.html', 
           controller: 'headerCtrl' 
          }) 
          .when('/ProjectIDCreation', { 
           templateUrl: '/ProjectIDCreation.html', 
           controller: 'headerCtrl' 
          }) 
          .otherwise('/', { 
           templateUrl: 'AddHeader.html', 
           controller: 'headerCtrl' 
          }) 
    } 
]);