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>

我搜索过相关问题并进行了很多更改，但仍无法在视图中加载部分模板。网址已更改，但视频未更新。

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

Answer 1

我已创建了一个可以重现和解决问题的插件，您可以在此处找到：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以重现您的问题。

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

1 个答案: