无法让 ng-controller 在 Angular 应用程序中工作答案

【问题标题】：Cannot get ng-controller to work in angular app无法让 ng-controller 在 Angular 应用程序中工作
【发布时间】：2016-08-13 09:16:12
【问题描述】：

我刚刚开始自学 Web 开发，但我遇到了一个问题，即我的整个应用程序或只是一个控制器都无法配合。

在prototype.js，我声明了应用程序：

    var cds = angular.module('cds', ['ngRoute']);

    cds.config(function($routeProvider) {
      $routeProvider
        .when('/', {
            controller: 'appCtrl',
            templateUrl: 'partials/login.html'
        })
        .otherwise({
            redirectTo: '/'
        });
      });

    cds.controller('appCtrl', ['$scope', function($scope) {
        $scope.pageClass = 'page-login';
        $scope.list = [
            {name: 'One', description: 'I'},
            {name: 'Two', description: 'II'},
            {name: 'Three', description: 'III'},
            {name: 'One More', description: 'Extra'}
        ];
    }]);

在我的 HTML 文件中：

<!DOCTYPE html>
    <html ng-app='cds'>
    <head>
        <title>References</title>
        <meta charset="utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script src="js/prototype.js"></script>
        <style type="text/css">
        @import url("styles.css");
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.css">
    </head> 

    <body ng-controller='appCtrl' onload="align()" onresize="align()">
        {{ pageClass }}
        <div ng-view></div>
        <div id="dropdown">
            <button class="drop-btn">Options</button>
            <div class="dropdown-content">
                <a href="#/body_diagram"><img src="img/header.menu.png"></a>
            </div>
        </div>
    </body>
    </html>

由于某种原因，{{ pageClass }} 甚至不会显示我在控制器中分配给它的值，更不用说 ng-view 元素了。之前，我遵循了一个非常古老的路由教程，其中仅使用 angular.module('myApp', ...) 声明了该应用程序，并且所有控制器都作为独立于 Angular 应用程序的单独功能制成，并且一切对我来说都很好。然而，在从 angular 1.0.7 跳到 1.5.8 之后（这是一个很长的故事，也是新手的错误），我尝试更新样式并清理我的代码，这就是发生的事情。我觉得我在这里遗漏了一些非常基本的东西。

编辑：

原来我忘了包括 ng-route。德普。现在一切正常。谢谢大家！

【问题讨论】：

一个小提琴会很好
您的调试器窗口上是否有任何错误消息？（在 chrome 中，它将在开发者工具窗口的控制台上）。
对不起，这里是：jsfiddle.net/U3pVM/26672。我只是对我什至无法让“页面登录”而不是{{ pageClass }}出现在屏幕上感到困惑。
warun26 你太棒了，原来我忘了包含 ng-route 依赖项！在此之前从不知道开发者控制台。我相信它在未来会非常有用。

标签： javascript angularjs angularjs-routing ng-app

【解决方案1】：

您似乎缺少ngRoute 模块。您可以通过 CDN 链接到它：

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js

这是一个 fiddle，添加了依赖项。

【讨论】：

【解决方案2】：

请务必包含 ngRoute，并且可能将脚本包含在正文的底部...这样做可以让您的小提琴工作

【讨论】：