AngularJS NgRoute - 网址更改但视图不呈现，没有错误答案

【问题标题】：AngularJS NgRoute - Url Changes But view doesnt render,No errorsAngularJS NgRoute - 网址更改但视图不呈现，没有错误
【发布时间】：2017-03-15 18:10:56
【问题描述】：

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>

我已经搜索了相关问题并做了很多更改，但仍然无法在视图中加载部分模板。网址已更改，但视图没有更新。

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

【问题讨论】：

你用的是什么版本的angularjs？
我在 appscript.js 文件中引用了 v1.6.3
尝试像这样重新排序 head 标签中调用的脚本 .. angular.min --> angular-route --> appscript --> controllers
这听起来像是我回答的 stackoverflow.com/questions/42816212/… 的副本。你能检查那里提供的答案吗？
@ModarNa 我尝试重新订购，它解决了控制器消息显示的问题，但没有加载模板。

标签： angularjs ngroute

【解决方案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，为了使用路由，请确保在此处阅读我的答案：Angular routing with ng-view is not working

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

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

【讨论】：

我更新了plunkr，请看一下，它仍然没有更新视图plnkr.co/edit/dkckKg0njxd7JSdxPGXq?p=options
您的 plunkr 有多个错误：您需要将 myApp.config([$routeProvider,function($routeProvider,$locationProvider) { 更改为 myApp.config(['$routeProvider', '$locationProvider',function($routeProvider,$locationProvider) {。那么你需要确保servicesController和contactsController存在。
太棒了..它的工作原理！！谢谢！但是我看到很多帖子的语法与 myApp.config([$routeProvider,function($routeProvider) { , 它对其他人如何工作？？
数组必须包含字符串，最后一个参数是函数。您将$routeProvider 作为第一个参数传递，但您需要将其设为'$routeProvider'。见：docs.angularjs.org/guide/di
eclipse没有显示任何错误..你知道如何让eclipse显示这样的错误吗？