[SOLVED] Cannot get ng-controller to work in angular app

Cannot get ng-controller to work in angular app

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.

In prototype.js, I declare the app:

    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:

<!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. 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. 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. I feel like I'm missing something very basic here.

Edit:

Turns out I forgot to include ng-route. Derp. Now everything's working perfectly. Thanks all!

Solution

Looks like you're missing the ngRoute module. You can link to it through the CDN:

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

Here's a fiddle with the added dependency.