Angular.js: No controllers

I'm just trying to get a simple example going with angular but the oddness of the provisioning conventions have me stymied.

It appears I'm doing the right thing, I can see Angular in the DOM. But it has no controllers and the dom elements that target it as a controller have been processed.

Does anyone see the glaringly stupid thing I am doing to kill the puppy?

var app = angular.module( 'AppModule',[] );
angular.module( 'AppModule').controller(
'AppController',
['$scope', '$log',
    function( $scope, $log ) {
        $log.warn("This is not working");
        $scope.main = {
            user : 'Scott',
            id   : 2,
            priv : 'admin'
        };
    }
]);

HTML code -- this is too simple to be so hard.

<!DOCTYPE html>
<html ng-app="AppModule">
<head>
<title>foo</title>
</head>
<body>
<div class="container">
    <div ng-controller="AppController">
        <div >Welcome {{main.user}}</div>
            <div >level{{main.priv}}</div>
    </div>
</div>

<!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> -->
<script src="/lib/angular/angular.js"></script>
<!--<script src="/lib/bootstrap.min.js"></script> -->
<script src="/lib/foo-min.js"></script>

</body>
</html>

I will be your best friend if you can point out what bone headed thing I am doing wrong.

Answers


I dont know how your directory structure looks like, but try without the slash

<script src="lib/angular/angular.js"></script>
<script src="lib/foo-min.js"></script>

I can see a little "error", it is not a determinant problem. You have:

var app = angular.module( 'AppModule',[] ); angular.module( 'AppModule').controller(

while it should be (note I changed angular by app):

var app = angular.module( 'AppModule',[] ); app.controller(

By the way, try changing your notation from this:

var app = angular.module( 'AppModule',[] );
app.module( 'AppModule').controller(
'AppController',
['$scope', '$log',
    function( $scope, $log ) {
        $log.warn("This is not working");
        $scope.main = {
            user : 'Scott',
            id   : 2,
            priv : 'admin'
        };
    }
]);

To this:

var app = angular.module('appModule', []);

app.controller('appController', function ($scope, $log){
    $log.warn("This is not working");
    $scope.main = {
        user : 'Scott',
        id   : 2,
        priv : 'admin'
    };

});

Here you can find a jsfiddle working well: http://jsfiddle.net/ACmXR/1/

Hope to help


Have you referenced your controller js file somewhere other than the html you're showing? If not, start by adding a reference to this at the end of you body.


Need Your Help

Setting up a view to draw to in Objective-C (iPhone)?

iphone objective-c xcode uiview quartz-graphics

Okay, so, I'm all new to iPhone and stuff, but I'm not even at programming, I have many years of experience with ActionScript 2.0 and 3.0, I want to set up a view, that I can also pass variables to...

android array from shared preferences

android android-preferences

I'm trying to iterate over a collection of shared preferences, and generate an ArrayList of HashMaps, but having an issue.