angularjs路由不工作没有发现错误

时间:2016-11-05 11:06:49

标签: angularjs-routing

这里似乎有什么问题我没有得到任何错误,但同时在路由方面没有进展。 。

的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发生的情况与/ home相同我不知道在哪里出错,因为我的控制台没有错误

2 个答案:

答案 0 :(得分:0)

我认为问题在于你的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>

答案 1 :(得分:0)

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

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

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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