tomatoBisque tomatoBisque - 1 year ago 86
AngularJS Question

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.


, I declare the app:

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

cds.config(function($routeProvider) {
.when('/', {
controller: 'appCtrl',
templateUrl: 'partials/login.html'
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'>
<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");
<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="css/font-awesome.css">

<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/"></a>

For some reason,
{{ pageClass }}
won't even display the value I assigned to it in the controller, let alone
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.


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

Answer Source

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

Here's a fiddle with the added dependency.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download