Angular JS - loading a controller from a JS file

Question

This controller works just fine:

function airlineRouter($routeProvider) {
    $routeProvider
        .when('/',
            {
                templateUrl:"partials/destinations.html",
                controller: function($scope) {
                    $scope.setActive('destinations');
                } //end controller
         });
} //end airlineRouter

When I make the controller it's own JS file, it doesn't work anymore. Like this:

function airlineRouter($routeProvider) {
    $routeProvider
        when('/',
            {
                templateUrl:"partials/destinations.html",
                controller: "DestinationsCtrl"
            });
} //end airlineRouter

My Controller file resides in 'root/js/controllers/destinations.js', which is the same folder my 'app.js' file resides. The complete 'app.js' file looks like this:

 angular
    .module('airline', ['ngRoute'])
    .config(airlineRouter);

function airlineRouter($routeProvider) {
    $routeProvider
        .when('/',
            {
                templateUrl:"partials/destinations.html",
                controller: "DestinationsCtrl"
            }
        );
} //end airlineRouter

My complete controller JS file looks like this:

function DestinationsCtrl($scope) {
    $scope.setActive('destinations');
} //end DestinationsCtrl

Why won't my controller load by the function name as this tut I'm doing says? The tut's file seems to work. Mine isn't.

Edit: console log shows this: Error: [ng:areq] Argument 'DestinationsCtrl' is not a function, got undefined

Edit 2: The tut I was working on was called 'Nesting Scopes', if that gives anyone a better idea of what I'm trying to do.

one suggestion is set use convention of var app=module('airline'... then for controllers app.controller('DestinationsCtrl', function($scope)... — charlietfl
– charlietfl, Commented Oct 29, 2013 at 22:06
oops...var app=angular.module('airline'... left out angular — charlietfl
– charlietfl, Commented Oct 29, 2013 at 22:32
Changecontroller: "DestinationsCtrl" to controller: DestinationsCtrl — Chandermani
– Chandermani, Commented Oct 30, 2013 at 2:21

Brent · Accepted Answer · 2013-10-30 16:53:43Z

1

Ok, like I said, I'm new to AngularJS, and I'm kind of an idiot. I wasn't putting my external JS script links in my <head> on my index.html file. That's it. I can't believe I overlooked this.

answered Oct 30, 2013 at 16:53

Brent

1,9361 gold badge15 silver badges17 bronze badges

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

Comments

Chickenrice · Accepted Answer · 2013-10-30 02:46:59Z

0

Try to change your controller declaration:

angular.module('airline')
       .controller('DestinationsCtrl',function($scope){
         $scope.setActive('destinations');
       });

Then this controller will work as expected.

Hope this is helpful for you.

answered Oct 30, 2013 at 2:46

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

1 Comment

Brent Over a year ago

The whole purpose of this part of the tut was to show the controller can be in an external/separate file. My first example works, but once I move it to an external file (see the path above), it's not seeing it. It seems like a really great way to manage/reuse logic. I'm just stuck.

Collectives™ on Stack Overflow

Angular JS - loading a controller from a JS file

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related