ng-controller：单击 Link 时没有任何反应

Question

我创建了一个非常简单的 angularjs 应用程序用于学习目的。在下面的代码中，索引页面加载，但是当我点击点击时没有任何反应，除了地址栏中的 URL 明显改变。

我在 Firebug 的控制台中没有看到任何错误。

如果我在浏览器中查看源代码时单击指向我的 JS 文件的链接，则会成功检索所有文件。

我还应该注意，在添加控制器之前，单击链接后我能够在 ng-view 中看到 paris.html 或 london.html，因此服务器能够找到这些文件。

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

Answer 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"; });

因为应用程序是全局可访问的

Answer 2

添加到 Khaled Awad 的回答中

在 CityController.js

中进行更改

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

ng-controller：单击 Link 时没有任何反应

ng-controller: Nothing Happens When Link Is Clicked

javascript

angularjs

ngroute