AngularJS NgRoute - Url 更改但视图未呈现，没有错误

Question

appscript.js

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


    myApp.config([$routeProvider,function($routeProvider) {

      $routeProvider

      // route for the home page
        .when('/home', {

        templateUrl: 'home.html',
        controller: 'homeController'
      })

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

      // route for the contact page
      .when('/contacts', {
        templateUrl: 'contacts.html',
        controller: 'contactsController'
      })
      .otherwise({ redirectTo: '/services' });
    }
    ]);

index.html

<!doctype html>
<html ng-app="myApp">
  <head >


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

    <link href="Styles/Styles.css" rel="stylesheet">

    <script src="homeController.js"></script>    
      <script src="servicesController.js"></script>
       <script src="contactsController.js"></script>
       <script src="aboutController.js"></script>
       <script src="clientsController.js"></script>

       <script src="angular-route.min.js"></script>
      <script src="angular.min.js"></script>

  </head>
  <body >
<div class="header" > <h2 style="color:blue;">Training Institute</h2> 
  </div>
<div class="nav">

<a href="#/home">Home</a>
<a href="#/about">About</a>
  <a href="#/services">Services</a>
  <a href="#/clients">Clients</a>
  <a href="#/contacts">Contact</a>

  </div>

<div class="content"  >  
<ng-view>   </ng-view>

  </div>

<div class="footer">footer</div>
  </body>
</html>

homeController.js

angular.module('myApp').controller('homeController',function($scope)
        {

           $scope.message="i am in home controller";

        }


);

home.html

<div>i am in home partial template</div>

我搜索了相关问题并做了很多更改，但仍然无法在 view.The 中加载部分模板 url 已更改但视图未更新。

我将所有代码文件放在 index.html 所在的相同位置，以确保问题不是因为路径不正确。

Answer 1

我创建了一个 plunkr 来重现和解决你的问题，你可以在这里找到它：https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview（注意：只有家庭、服务和联系人有效，因为这些是你的代码中唯一配置的路由所以其余的回落到 otherwise)

中指定的路线

您的代码有两个问题：

你的文件顺序不对，应该是：

<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="appscript.js"></script>
<script src="homeController.js"></script>    
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>

您使用的是 AngularJS 1.6，为了使用路由确保阅读我的回答：

长话短说：从 AngularJS 1.6 开始，hashPrefix 的默认值为 !。由于您没有使用它，您要么必须使用它，要么使用 $locationProvider.hashPrefix('') 将其重置为 ''。由于此提交，此更改自 AngularJS 1.6 引入：https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52

注意：如果这仍然不能帮助您，我们可能需要更多信息，因为我们不知道所有这些 js 文件的内容是什么。在这种情况下，请随时更新我的 plunkr 以重现您的问题。

AngularJS NgRoute - Url 更改但视图未呈现，没有错误

AngularJS NgRoute - Url Changes But view doesnt render,No errors

angularjs

ngroute