CODEWITHSUNDEEP
angularjsangular-ui-router
Ryan Langton
Ryan Langton

Reputation: 6160

Undefined Controller AngularJS

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();
}])

Upvotes: 0

Views: 2816

Answers (1)

drew_w
drew_w

Reputation: 10430

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!

Upvotes: 3

Related Questions