2016-04-07 5 views
-1

Я создал крошечное простое приложение angularjs для учебных целей. В следующем коде загружается индексная страница, но ничего не происходит, когда я щелкаю клики, за исключением того, что URL-адрес в адресной строке изменяется.ng-controller: ничего не происходит при нажатии ссылки

Я не вижу ошибок в консоли Firebug.

Если я нажимаю ссылки на мои файлы JS, когда я просматриваю исходный код в своем браузере, все файлы извлекаются успешно.

Следует также отметить, что до того, как я добавил контроллер, я смог увидеть paris.html или london.html в ng-view при нажатии на ссылки, чтобы сервер смог найти эти файлы.

Я новичок в angularjs и не могу найти проблему. Любая помощь приветствуется.

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}} 

ответ

1

Вы перезапись приложение снова в этой строке

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

т.е. вы объявляете приложение дважды, здесь:

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

и здесь

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

Решение может быть, оставить эту часть var app = angular.module("mainApp", ['ngRoute']);

, а затем

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

Поскольку приложение является глобально доступным

+0

Это работало. Спасибо. У меня такое чувство, что это было просто. –

+0

Хорошо, что решает проблема! –

0

Добавление Ответ Халеда Авада в

Внесите изменения в CityController.JS

var mainApp = angular.module("mainApp");

Смежные вопросы