无法让ng-controller在Angle App中工作

Question

I've just started learning web development on my own, and I've run into an issue where either my entire app or just a controller just won't cooperate. 我刚刚开始独自学习Web开发，但遇到了一个问题，就是我的整个应用程序或控制器都无法配合。

In prototype.js , I declare the app: 在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'}
        ];
    }]);

In my HTML file: 在我的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>

For some reason, {{ pageClass }} won't even display the value I assigned to it in the controller, let alone ng-view elements. 由于某些原因， {{ pageClass }}甚至不会在控制器中显示我分配给它的值，更不用说ng-view元素了。 Before, I had followed a very old routing tutorial where the app was declared using just angular.module('myApp', ...) , and all controllers made as individual functions independent from the angular app, and everything worked fine for me. 在此之前，我遵循了非常古老的路由教程，其中仅使用angular.module('myApp', ...)声明了应用程序，并且将所有控制器作为独立的函数制成，独立于angular应用程序，并且一切正常。 However, after jumping from angular 1.0.7 to 1.5.8 (it's a long story, and a newbie mistake), I tried updating the style and cleaning my code up, and this is what happened. 但是，从角度1.0.7跳到1.5.8（这是一个很长的故事，并且是一个新手错误）之后，我尝试更新样式并清理代码，这就是发生的情况。 I feel like I'm missing something very basic here. 我觉得我在这里错过了一些非常基本的东西。

Edit: 编辑：

Turns out I forgot to include ng-route. 原来我忘了包括ng-route。 Derp. 德普 Now everything's working perfectly. 现在一切正常。 Thanks all! 谢谢大家！

Answer 1

Looks like you're missing the ngRoute module. 好像您缺少ngRoute模块。 You can link to it through the CDN: 您可以通过CDN链接到它：

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

Here's a fiddle with the added dependency. 这是一个带有附加依赖项的小提琴。

Answer 2

嘿，请确保包括ngRoute，并且可能将脚本包括在正文的底部...这样做可以使您的小提琴发挥作用

无法让ng-controller在Angle App中工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-08-13 01:06:50

解决方案2
0 2016-08-13 01:11:19

无法让ng-controller在Angle App中工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-08-13 01:06:50

解决方案2 0 2016-08-13 01:11:19

解决方案1
0 已采纳 2016-08-13 01:06:50

解决方案2
0 2016-08-13 01:11:19