Javascript 无法在AngularJS中以HTML5模式切换视图_Javascript_Angularjs_Html

Javascript 无法在AngularJS中以HTML5模式切换视图

javascript angularjs html

Javascript 无法在AngularJS中以HTML5模式切换视图,javascript,angularjs,html,Javascript,Angularjs,Html,我正在玩弄HTML5链接。不知何故，我无法使它工作：视图未解析为URL。此外，我不清楚是否需要在视图名称前加“/”。如果我这样做，浏览器URL链接将显示“file:///addStudent“没有任何基，另一方面，如果没有基，我会看到带有基的URL。应该是这样吗？在任何情况下，我都会看到错误消息：“未找到此网页”。我做错了什么？谢谢 testAngularJS.htm <html> <head> <title>Angular JS Views</t

我正在玩弄HTML5链接。不知何故，我无法使它工作：视图未解析为URL。此外，我不清楚是否需要在视图名称前加“/”。如果我这样做，浏览器URL链接将显示“file:///addStudent“没有任何基，另一方面，如果没有基，我会看到带有基的URL。应该是这样吗？在任何情况下，我都会看到错误消息：“未找到此网页”。我做错了什么？谢谢

testAngularJS.htm

<html>
<head>
   <title>Angular JS Views</title>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
   <base href="file:///home/myusername/projects/parser_ui/">
</head>
<body>
   <h2>AngularJS Sample Application</h2>
   <div ng-app="mainApp">
      <p><a href="addStudent">Add Student</a></p>
      <p><a href="viewStudents">View Students</a></p>
      <div ng-view></div>
      <script type="text/ng-template" id="addStudent.htm">
         <h2> Add Student </h2>
         {{message}}
      </script>
      <script type="text/ng-template" id="viewStudents.htm">
         <h2> View Students </h2>       
         {{message}}
      </script> 
   </div>

   <script>
      var mainApp = angular.module("mainApp", ['ngRoute']);

      mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {

            // use the HTML5 History API
            $locationProvider.html5Mode(true);

            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.htm',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.htm',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: 'addStudent'
               });
      }];

      mainApp.controller('AddStudentController', function($scope) {
         $scope.message = "This page will be used to display add student form";
      });

      mainApp.controller('ViewStudentsController', function($scope) {
         $scope.message = "This page will be used to display all the students";
      });
   </script>
</body>
</html>


角度JS视图
AngularJS示例应用程序


添加学生
{{message}}
查看学生
{{message}}
var mainApp=angular.module（“mainApp”，['ngRoute']）；
mainApp.config[“$locationProvider”，“$routeProvider”，函数（$routeProvider，$locationProvider）{
//使用HTML5历史API
$locationProvider.html5Mode（true）；
$routeProvider。
当（“/addStudent”{
templateUrl:'addStudent.htm'，
控制器：“AddStudentController”
}).
当（“/viewStudents”{
templateUrl:'viewStudents.htm'，
控制器：“ViewStudentsController”
}).
否则({
重定向至：“addStudent”
});
}];
mainApp.controller（'AddStudentController'，函数（$scope）{
$scope.message=“此页面将用于显示添加学生表单”；
});
mainApp.controller（'ViewStudentsController'，函数（$scope）{
$scope.message=“此页面将用于显示所有学生”；
});

在以下位置运行，但不在本地运行：


角度JS视图
AngularJS示例应用程序


添加学生
{{message}}
查看学生
{{message}}
var mainApp=angular.module（“mainApp”，['ngRoute']）；
mainApp.config（[“$locationProvider”，“$routeProvider”，函数（$locationProvider，$routeProvider）{
//使用HTML5历史API
$locationProvider.html5Mode（true）；
$routeProvider。
当（“/addStudent”{
templateUrl:'addStudent.htm'，
控制器：“AddStudentController”
}).
当（“/viewStudents”{
templateUrl:'viewStudents.htm'，
控制器：“ViewStudentsController”
}).
否则({
重定向到：'/addStudent'
});
}]);
mainApp.controller（'AddStudentController'，函数（$scope）{
$scope.message=“此页面将用于显示添加学生表单”；
});
mainApp.controller（'ViewStudentsController'，函数（$scope）{
$scope.message=“此页面将用于显示所有学生”；
});

在以下位置运行，但不在本地运行：


角度JS视图
AngularJS示例应用程序


添加学生
{{message}}
查看学生
{{message}}
var mainApp=angular.module（“mainApp”，['ngRoute']）；
mainApp.config（[“$locationProvider”，“$routeProvider”，函数（$locationProvider，$routeProvider）{
//使用HTML5历史API
$locationProvider.html5Mode（true）；
$routeProvider。
当（“/addStudent”{
templateUrl:'addStudent.htm'，
控制器：“AddStudentController”
}).
当（“/viewStudents”{
templateUrl:'viewStudents.htm'，
控制器：“ViewStudentsController”
}).
否则({
重定向到：'/addStudent'
});
}]);
mainApp.controller（'AddStudentController'，函数（$scope）{
$scope.message=“此页面将用于显示添加学生表单”；
});
mainApp.controller（'ViewStudentsController'，函数（$scope）{
$scope.message=“此页面将用于显示所有学生”；
});

好的，我最终成功了。这就是需要做什么：

必须在服务器上运行，而不是本地文件（文件：//）。我在上面的评论中使用了Phil建议的nodejs和Express

在这一行（下面），我删除了括号，因为使用file:///它给了我一个错误。我这样做是因为有其他的建议。但是，括号必须在那里，否则，它将无法与服务器一起工作

mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {

……应该是：

   mainApp.config(["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {

由于AngularJS是一个SPA框架，您可能还发现需要配置服务器，将所有URL传递给AngularJS，以便将所有/解释为视图，而不是文件夹/文件

例如，在nodejs中，我添加了以下内容：

app.use('/*', function(req, res){
  res.sendFile(path.resolve(__dirname + '/public/angular/views/index.html'));
});

话虽如此，当我把上面的评论说出来时，它仍然运行良好，我不知道为什么。

好的，我最终能够使它运行。这就是需要做什么：

必须在服务器上运行，而不是本地文件（文件：//）。我在上面的评论中使用了Phil建议的nodejs和Express

mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {

……应该是：

   mainApp.config(["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {

由于AngularJS是一个SPA框架，您可能还发现需要配置服务器，将所有URL传递给AngularJS，以便将所有/解释为v