AngularJs路由不再工作。地址栏更改但视图没有

时间:2014-12-22 16:54:46

标签: javascript jquery html css angularjs

http://plnkr.co/edit/iNG2DY3Wams48GxpI2KK?p=preview

我遇到路由问题。以前工作得非常好。我还没有改变script.js文件中的任何内容。现在它拒绝进入另一个页面。我有部分(.html文件)存储在partials / about.html等

当我点击导航栏或页脚中的任何链接时...视图无法更改...它已停留在主页面上,但地址栏已更改。

感谢。

html ng-app="financeApp">
  <head>
<meta charset="utf-8">
    <!-- CSS -->
<!--    <link rel="stylesheet"     href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-    awesome.css" />
 <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
  <!-- logo -->

   <a href="#!"><img class="logo" src="img/logo.png" /></a>

       <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#/"></a>
        </div>

        <ul class=" navbar-right">

             <li><a href="#">Home</a></li>

             <li><a href="#about">About</a></li>

             <li><a href="#contact">Contact</a></li>



        </ul>
    </div>
  </nav>
</div>
</header>

<body>

<div ng-controller='mainController'>


<div back-img="img/02.png" >




</div>



</div>



<!-- Loading the Footer -->
 <div id="footer" ng-include="'partials/footer.html'"></div>


</div>

<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js">    </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>

<script src="js/script.js"></script>

<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/directives/carousel.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>


</body>
</html>

和这个script.js文件

var financeApp = angular.module('financeApp', ['ngRoute']);

 // configure our routes
 financeApp.config(function($routeProvider) {
    $routeProvider
    // route for the home page
    .when('/', {
        templateUrl : 'partials/main.html',
        controller  : 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl : 'partials/about.html',
        controller  : 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl : 'partials/contact.html',
        controller  : 'contactController'
    })

    .otherwise({
        redirectTo: '/'
    })
});

1 个答案:

答案 0 :(得分:0)

在你的代码中,我注意到主要是

  

&#34; NG-视图&#34;属性    缺少,&#34; BODY&#34;对齐和所有标签都不清楚纠正这些问题和在plunker提供所有必要的文件你尝试什么