angularjs 路由不工作，未发现错误

Question

这里似乎出了什么问题，我没有收到任何错误，但同时在路由方面没有任何进展。 .

index.html

<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>

</head>
<body ng-app="myApp">

<h1> this is index.html </h1>

<div ng-view></div>

</body>
</html>

mainpage.js // 我的控制器在哪里

    var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);

app.config(function($routeProvider) { 
    $routeProvider
    .when('/', {
        templateUrl : 'index.html'
    })
    .when('/home', {
        templateUrl : 'homepage.html'
    })
    .otherwise({
        templateUrl : 'index.html'
    });

});

当我在我的浏览器中加载“/”时，/home 没有发生任何事情，我不知道我哪里出错了，因为我的控制台没有错误

Answer 1

我认为您的 javascript 文件名有问题。在索引中您提到了 mainpage.js 并在描述中提到了 homepage.js.

编辑：好的。然后尝试像

这样排列文件列表

<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>

Answer 2

正如用户 Priyanka 在回答中提到的，文件名可能是问题所在。但这应该会在控制台上产生错误，根据您的说法，控制台上没有错误。

另一个可能的原因是您导入文件的顺序。我通常以这种方式排列我的文件 -

<head>
  <!-- 1. External CSS Libraries likes bootstrap, jquery -->
  
  <!-- 2. My Application specific CSS files -->
  
  <!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
  
  <!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>

同样，您导入外部 JS 库的顺序也可能会导致问题。

Answer 3

路由模板应该是局部视图。这里 index.html 是单页应用程序的根目录，这个页面不应该重新加载（除非你想销毁并重新启动应用程序）。尝试将 / 的 templateUrl 更改为只有 <h2> HELLO WORLD!</h2> 的文件，并监视控制台（开发工具）是否出现与获取模板

angularjs 路由不工作，未发现错误

angularjs routing is not working no error found

angularjs-routing