AngularJS 的路由不起作用。

26 浏览
0 Comments

AngularJS 的路由不起作用。

作为学习过程的一部分，我正在研究AngularJS路由概念。为此，在应用程序内创建了一个内部文件夹，其中包含两个示例测试HTML页面。

当我运行应用程序时，它应该从该文件夹加载第一个页面，但实际上并没有发生。我不确定在这段代码中哪里出错了......

我得到了这样的错误“angular.js: 4640未捕获的错误：[$injector：modulerr]”

以下是我的控制器代码

var myApp = angular.module('myApp', ['ngRoute']);   
   myApp.config(function ($routeProvider) {
$routeProvider
    .when('/', {
        templateUrl: 'Pages/main.html',
        controller: 'mainController'
    })
    .when('/second', {
        templateUrl: 'Pages/second.html',
        controller: 'secondController'
    })
   });
   myApp.controller('mainController', ['$scope','$log', function($scope,$log) {   
}]);
    myApp.controller('secondController', ['$scope','$log', function($scope,$log) {   
}]);

和HTML代码在这里

 

 

以及针对main.html

this is main page

 

以及针对second.html

this is second page

 

请问是否有人能帮忙解决这个问题，非常感谢。

admin 更改状态以发布 2023年5月22日
0

1 答案

0 Comments

对我来说，事情似乎进展顺利。请参阅下面的工作示例：

（只需将主页链接的 href 改为 #/ 即可）

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'Pages/main.html',
      controller: 'mainController'
    })
  .when('/second', {
    templateUrl: 'Pages/second.html',
    controller: 'secondController'
  })
});
myApp.controller('mainController', ['$scope', '$log',
  function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
  function($scope, $log) {}
]);


html,
body,
input,
select,
textarea {
  font-size: 1.05em;
}

编辑

不要直接使用 file:/// 协议来提供 Angular 代码。这将无法请求加载资源。使用任何简单的轻量级服务器，例如：

  1. Linux 平台上的 Python Simple 服务器（python -m SimpleHTTPServer）
  2. Mongoose 适用于 Windows
0