Question

我正在尝试建立一个不需要在页面之间进行刷新的网站。我以前通过使用angularJS $routeProvider实现了此目的，但是由于某些原因，我的内容将不会从index.html以外的页面加载。

我尝试将console.log语句放入控制器中，以查看是否已到达该控制器，但是控制台在日志中什么也没有显示，因此尽管URL发生了变化，但显然控制器甚至没有被触发符合预期（即从localhost:8000/#/到localhost:8000/#/LetsTalk）。 home.html或LetsTalk.html内容都没有加载，这对我来说很奇怪，因为我从我制作的另一个网站复制并粘贴了大部分代码，这些网站运行得很好。

<html ng-app="myApp">
<div class="nav mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <ul>
          <li class="four"><a href="#/LetsTalk">let's talk</a></li>
          <hr />
        </ul>
      </nav>
    </div>
  </header>
</div>
</html>

'use strict';
var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  });

  $routeProvider.when('/LetsTalk', {
    templateUrl: 'LetsTalk.html',
    controller: 'LetsTalkCtrl'
  });

  $routeProvider.otherwise({redirecTo: '/'});
}]);


app.controller('homeCtrl', ['$scope', function($scope){
    $scope.message = '';
    console.log('welcome to home');
}]);

app.controller('LetsTalkCtrl', ['$scope', function($scope){
    $scope.message = 'lets talk';
    console.log('lets talk');
}]);

我目前没有收到任何错误消息。我不明白的是，为什么我什至无法显示console.log消息，我认为这些消息没有出现，原因是我的LetsTalk.html和home.html的实际内容未加载。预先感谢！

Answer 1

** facepalm **

因此事实证明，我在index.html页面上缺少以下行：

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

AngularJS $ routeProvider不加载内容或从控制器登录到控制台

1 个答案: