Question

我是棱角分明的新人。我试图做路由。我编写了如下代码

＆＃13;

 var mainApp = angular.module('MainApp', ['ngRoute']);

 mainApp.config(
   function($routeProvider) {
     $routeProvider.
     when('/sampleOne', {
       templateUrl: 'SampleOne.html',
       controller: 'productController'
     }).
     when('/sampleTwo', {
       templateUrl: 'SampleTwo.html',
       controller: 'studentController'
     }).
     otherwise({
       redirectTo: '/'
     });
   });

 mainApp.controller('productController', function($scope) {
  //controller logic
 });

 mainApp.controller('studentController', function($scope) {
  //controller logic
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html>

<head>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
</head>

<body ng-app="MainApp">
  <ul>
    <li>
      <a href="#/sampleOne">Sample 1</a>
    </li>
    <li>
      <a href="#/sampleTwo">Sample 2</a>
    </li>
  </ul>

  <div ng-view></div>
</body>

</html>

＆＃13;

两个视图中的代码工作正常。

当我运行并点击链接时，网址正在发生变化，但内容未呈现，正在抛出控制台错误，如下所示

  angular.js:13424 Error: [$compile:tpload] Failed to load template: SampleTwo.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.3/$compile/tpload?p0=SampleTwo.html&p1=404&p2=Not%20Found
    at angular.js:68
    at handleError (angular.js:18774)
    at processQueue (angular.js:15757)
    at angular.js:15773
    at Scope.$eval (angular.js:17025)
    at Scope.$digest (angular.js:16841)
    at Scope.$apply (angular.js:17133)
    at done (angular.js:11454)
    at completeRequest (angular.js:11652)
    at XMLHttpRequest.requestLoaded (angular.js:11593)

出了什么问题？

Answer 1

您的SampleTwo.html在哪里？在这种情况下，模板文件应该放在控制器脚本所在的相同位置。

Answer 2

在angular docs中搜索了您的错误：

在AngularJS 1.2.0及更高版本中，ngRoute已经移至自己的位置模块。如果在升级到1.2.x或之后出现此错误稍后，请确保您已安装ngRoute。

AngularJS路由不起作用

2 个答案: