AngularJs 路由不再工作.地址栏更改，但视图不会更改

AngularJs Routing not working anymore. Address bar changes but view does not

本文关键字：视图 路由 工作 地址栏 AngularJs 不再      更新时间：2023-09-26

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

我在路由方面遇到问题。 它以前工作得很好。 我没有更改脚本.js文件中的任何内容。 现在它拒绝进入不同的页面。 我有存储在 partials/about.html 等中的部分（.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>

和这个脚本.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: '/'
    })
});

在您的代码中，我注意到主要是

" ng-view" 属性 丢失，"BODY"对齐和所有标签都不清楚纠正这些问题，并在 plunker 提供您尝试的所有必要文件

相关文章：