CODEWITHSUNDEEP
angularjsangularjs-routingangularjs-ng-route
Dane Williams
Dane Williams

Reputation: 82

AngularJS $routeProvider Not loading content or logging to console from controller

I am trying to make a website which does not need to refresh when going from page to page. I have achieved this before by using the angularJS $routeProvider but for some reason my content will not load from pages other than index.html.

I've tried putting a console.log statement in my controller to see if the controller is even being reached, but the console shows nothing in the logs, so evidently the controller is not even being triggered, although the url is changing as expected (i.e. from localhost:8000/#/ to localhost:8000/#/LetsTalk). Neither the home.html or LetsTalk.html content are loading, which is strange to me because I copied and pasted most of this code from a different website I made which worked perfectly. 

<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');
}]);

I currently am not getting any error messages. What I do not understand is why I can not even get my console.log messages to appear, I assume that those messages are not appearing for the same reason that the actual content of my LetsTalk.html and home.html are not loading. Thanks in advance!

Upvotes: 0

Views: 165

Answers (1)

Dane Williams
Dane Williams

Reputation: 82

** facepalm **

So it turns out I was missing the following line from my index.html page:

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

Upvotes: 0

Related Questions