Undefined Controller AngularJS

Question

My template is loading but I get an error that the controller is undefined. The controller does exist in my sources exactly at the location defined. What is wrong with this code?

Error: [ng:areq] Argument '/Scripts/controllers/wizardNavigationCtrl.js' is not a function, got undefined
http://errors.angularjs.org/1.2.14/ng/areq?p0=%2FScripts%2Fcontrollers%2FwizardNavigationCtrl.js&p1=not%20aNaNunction%2C%20got%20undefined

Index.html (root page)

<div class="container">
    <div ui-view></div>
</div>

wizardLayout.html

<div>
    <ul class="nav nav-tabs">
        <li ng-repeat="model in models" ng-class="active: model.active">
            <a ui-sref=".model-{{model.name}}">model.name</a>
        </li>
        <li ng-class="navStep=='addnew' ? 'active' : ''">
            <a ui-sref=".newmodel"><span class="glyphicon glyphicon-plus"></span></a>
        </li>
        <li><a ui-sref=".other">Other</a></li>
        <li><a ui-sref=".customer">Customer Info</a></li>
        <li><a ui-sref=".shipping">Shipping Info</a></li>
        <li><a ui-sref=".review">Review</a></li>
    </ul>
</div>

<div ui-view>
</div>

app.js:

'use strict';

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('wizard', {
            url: '/',
            templateUrl: 'Scripts/templates/wizardLayout.html',
            controller: 'Scripts/controllers/wizardNavigationCtrl.js'
        })
        .state('wizard.newmodel', {
            url: '/newmodel',
            templateUrl: 'Scripts/templates/wizardModel.html',
            controller: 'Scripts/controllers/wizardModelCtrl.js'
        })
        .state('wizard.other', {
            url: '/other',
            templateUrl: 'Scripts/templates/wizardOther.html',
            controller: 'Scripts/controllers/wizardOtherCtrl.js'
        })
        .state('wizard.customer', {
            url: '/customer',
            templateUrl: 'Scripts/templates/wizardCustomer.html',
            controller: 'Scripts/controllers/wizardCustomerCtrl.js'
        })
        .state('wizard.shipping', {
            url: '/shipping',
            templateUrl: 'Scripts/templates/wizardShipping.html',
            controller: 'Scripts/controllers/wizardShippingCtrl.js'
        })
        .state('wizard.review', {
            url: '/review',
            templateUrl: 'Scripts/templates/wizardReview.html',
            controller: 'Scripts/controllers/wizardReviewCtrl.js'
        });
    }]);

wizardNavigationCtrl.js

myApp.controller('wizardNavigationCtrl', ['wizardSvc', '$scope', function (wizardSvc, $scope) {
    alert('navigation controller! ' + wizardSvc.quote.title);
    $scope.navStep = 'addnew';
    wizardSvc.init();
}])

You should refer to the Controller by the name, not by the filename. I mean: controller: wizardNavigationCtrl and not 'Scripts/controllers/wizardNavigationCtrl.js'. The file should be included with the script tag. — D.Evangelista
– D.Evangelista, Commented Apr 30, 2014 at 14:49

drew_w · Accepted Answer · 2014-04-30 14:51:00Z

3

The controller should be in the format MyControllerName not the name and path to the javascript file. That in mind, in order to use the controller the javascript must have been loaded by the browser already. This requires the use of a traditional script tag because angular won't find or load these scripts for you.

Taking a snippet from your code it becomes:

    .state('wizard', {
        url: '/',
        templateUrl: 'Scripts/templates/wizardLayout.html',
        controller: 'wizardNavigationCtrl'
    })

And somewhere in the page you need:

<script src="Scripts/controllers/wizardNavigationCtrl.js" type="text/javascript"></script>

Hope that helps!

answered Apr 30, 2014 at 14:51

drew_w

10.5k4 gold badges33 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Undefined Controller AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related