单独文件中的 AngularJS 控制器未标识范围答案

【问题标题】：AngularJS controllers in separate files not identifying the scope单独文件中的 AngularJS 控制器未标识范围
【发布时间】：2026-02-10 20:00:01
【问题描述】：

我正在学习 AngularJS，到目前为止，我已经有了一个框架应用程序的开始，它有一个主索引页面和两个模板：一个登录页面和一个主页，它们有非常简单的控制器。我还没有深入到骨架中，所以我试图完成的工作比说身份验证要基本得多。

我之所以这样编码，是为了尝试应用我在学习 AngularJS 时读到的一个概念；这是通过在其自己的 JS 文件中为每个模板（或部分模板）提供其自己的控制器来模块化您的代码。我相信这是我应该尽早应用的最佳实践，因为这可能会在未来大幅增长。这就是为什么我不把我的控制器放在一个文件中的原因，我知道这个文件效果很好。

现在事不宜迟，请查看以下代码以作为我目前所处位置的参考：

index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyApp</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div ng-view>
        <!-- loaded view here -->
    </div>

    <!-- JS imports -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>

app.js

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

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/login", {
        templateUrl: 'assets/partials/login.html',
        controller: 'LoginCtrl'
    })
    .when("/home", {
        templateUrl: 'assets/partials/home.html',
        controller: 'HomeCtrl'
    })
    .otherwise({ 
        redirectTo: '/login'
    }); 
}]);

<div class="container-fluid text-center">
    <h2>{{pageTitle}}</h2>
</div>

angular.module('MyApp')

.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

home.js

angular.module('MyApp')

.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

那么我正在解决的问题是什么？ {{pageTitle}} 是加载视图时显示的内容，而不是通过范围传入的实际值。请让我知道这里出了什么问题，我愿意接受有关如何改进我的代码的所有建议，非常感谢所有帮助！

【问题讨论】：

您没有在 HTML 中同时引用 login.js 和 home.js。添加对应的脚本标签。
没关系。它发生了。大问题总是出自小错误。

标签： angularjs angularjs-scope angularjs-routing angularjs-controller

【解决方案1】：

您尚未将 login.js 和 home.js 包含到 index.html 文件中。此外，您不需要在所有文件中包含angular.module('MyApp')。它已经存在于 app.js 中，同样的实例也可以在这里使用。

你可以这样做

MyApp.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

MyApp.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

【讨论】：

您只需要声明一次模块并为您进行角度实例化。一旦它在那里，您可以在依赖于同一模块的所有其他文件中使用相同的实例。您只是不需要在所有文件中实例化。
非常有趣，您可以将此建议作为对我的问题的编辑吗？这将是很棒的帮助
我已经在这个 plunk 中更新了所有内容。 plnkr.co/edit/rj3iNHqSVMqNoxtr79CM?p=preview
我明白了，只需在 index.js 中创建 var app = angular.module('MyApp', ['ngRoute'] ) 并在 home.js 中重用 app.controller (...) 和login.js 是它背后的想法，再次感谢您的帮助
仅在 index.html 中是否必须包含 login.js 和 home.js？因为当它从相应的 html 文件加载时，它没有被加载。例如从 login.html 加载 login.js。在这种情况下，控制器没有被识别。你能建议我选择@Jayram

【解决方案2】：

您需要在app.js 之后的html 中包含home.js 和login.js 控制器

<script src="assets/js/app.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/login.js"></script>

您也可以创建一个文件名controller.js 并将所有控制器添加到其中以用于简单的项目，这样您就不必从html中对js文件提出新的请求。

【讨论】：