-1

I've created a tiny simple angularjs application for learning purposes. In the following code, the index page loads, but nothing happens when I click the clicks except the URL in the address bar changes obviously.

I don't see any error in Firebug's console.

If I click the links to my JS files when I view source in my browser, all the files are retrieved successfully.

I should also note that before I added the controller, I was able to see paris.html or london.html in ng-view upon clicking the links so the server is able to find those files.

I'm new to angularjs and can't find the problem. Any help is appreciated.

index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


</head>
<body>

    <ol>
        <li><a href="#/cities/paris">Paris</a></li>
        <li><a href="#/cities/london">London</a></li>       
    </ol>

    <div class="content-wrapper" ng-controller="CityController">
        <div ng-view></div> 
    </div>


    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>    

    <script src="resources/js/app.js"></script>

    <script src="resources/js/CityController.js"></script>

</body>
</html>

app.js

var app = angular.module("mainApp", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
   $routeProvider.

   when('/cities/paris', {
      templateUrl: 'resources/paris.html', 
      controller: 'CityController'
   }).

   when('/cities/london', {
      templateUrl: 'resources/london.html', 
      controller: 'CityController'
   }).

   otherwise({
      redirectTo: 'resources/london.html'
   });

}]);

CityController.js

var mainApp = angular.module("mainApp", []);

mainApp.controller('CityController', function($scope) {
    $scope.message = "Hello From Controller";
});

paris.html

This is Paris.
<br><br><br>
{{message}}

london.html

This is London.
<br><br><br>
{{message}}
Khaled Awad
  • 1,644
  • 11
  • 24
John Steed
  • 599
  • 1
  • 12
  • 31

2 Answers2

1

You are overwriting the app again in this line

var mainApp = angular.module("mainApp", []);

i.e. you are declaring the app twice, here:

var app = angular.module("mainApp", ['ngRoute']);

and here

var mainApp = angular.module("mainApp", []);

Solution could be, leave this part var app = angular.module("mainApp", ['ngRoute']);

and then

app.controller('CityController', function($scope) { $scope.message = "Hello From Controller"; });

Since app is globally accessible

Khaled Awad
  • 1,644
  • 11
  • 24
0

Adding to Khaled Awad's Answer

Make the changes in CityController.js

var mainApp = angular.module("mainApp");
SenthilKumarM
  • 119
  • 1
  • 8