路由在AngularJS中不起作用

路由不适用于index.html。它甚至给出编译器错误。 Index.html是我的启动页面。通过标题详细信息链接，应打开Add Header.html页面。我已经添加了整个代码plunkr [ “https://plnkr.co/edit/w9eWiHKvSDrf0viERgoX?p=preview”]路由在AngularJS中不起作用

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(); 
});

来源

2017-01-19 beginner

确保您在脚本标记中使用的文件路径是正确的。哪些在plnkr是不正确的。我还发现你有两个模块定义避免这样做。你也不止一次导入angular，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(); 
});

来源

2017-01-19 08:59:16 Manish

所以导入两次是问题？我仍然得到应用程序未定义的错误..在HeaderCtrl.js文件中 – beginner

你见过我编辑过的Plunker吗？它似乎工作正常 – Manish

是的，我检查了。我已经把确切的代码HeaderCtrl.js – beginner

<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' 
          }) 
    } 
]);

来源

2017-01-19 08:03:45 Thailand

路由在AngularJS中不起作用

回答

相关问题