John M. John M. - 3 months ago 16
AngularJS Question

Why is my page not picking up my controller

I am getting to understand routing and I have a simple application with a couple buttons at the top in the header area. The buttons work well and display the correct information but I've directed that one of the pages (directory.html) use the "myController" controller that I created but instead it continues to give me the curley braces and not the actual scope data. Can someone tell me what I'm doing wrong?

HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>

<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>


JS

angular.module('myApp', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]);


angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.message = ("Hello World");
});


Directory.html

<p>This is my directory page.</p>
<p>{{message}}</p>


Header.html

<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#directory">Directory</a></li>
</ul>
</div>

Answer

Your js file is invalid.

angular.module('myApp', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            //since this page requires a controller
            controller: 'myController'
        })
        .otherwise({
            redirectTo: '/home'
        });

}]);

angular.module('myApp', [])
   .controller('myController', function($scope) {
      $scope.message = ("Hello World");
});

You have placed your controller inside the config module...