Question

我正在使用this code来使其与HTML5链接一起使用。不知何故，我无法使其工作：视图未解析为URL。另外，我不清楚我是否需要把＆＃34; /＆＃34;在视图名称前面。如果我这样做，浏览器URL链接会显示＆＃34; file：/// addStudent＆＃34; ，没有任何基础，另一方面，如果我没有，我会看到带有base的URL。这应该是那样的吗？在任何情况下，我都会看到错误消息：＆＃34;找不到此网页＆＃34; 。我在这做错了什么？谢谢！

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>

Answer 1

在Plunkr中运行但不在本地运行：

＆＃13;

<!DOCTYPE html>
<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="/">
</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($locationProvider, $routeProvider) {

            // 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>

＆＃13;

Answer 2

好的，我最终能够让它发挥作用。所以这是需要做什么：

必须在服务器上运行，而不是在本地文件（file：///）上运行。我在上面的评论中使用了由Phil建议的带有nodejs的节点。
在这一行（下面）我删除了括号，因为使用 file：/// 它给了我一个错误。由于SO的其他一些建议，我做到了。但是，括号必须在那里，否则，它将无法与服务器一起使用。
```
mainApp.config["$locationProvider", "$routeProvider", function($routeProvider, $locationProvider) {
```

......应该是：

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

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

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

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

话虽如此，当我评论上述情况时，它仍然运作良好，我不知道为什么。

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

2 个答案: