Error: ng:areq Bad Argument AngularJS

Question

I am working on a new portfolio site and want to use AngularJS to display my work and pure css to format layout etc.

I found a useful tutorial that outlined how to structure your app for future scaling and have set up a file tree like so:

so each component is a basically a mini MVC. I have set up my routes in app.routes.js and organised app.module.js as below:

app.module.js:

angular.module('app', ['ngRoute', 'appControllers', 'appResources']);
angular.module('appControllers', ['ngRoute']);
angular.module('appResources', ['ngResource']);

app.route.js:

angular.module('app')

    .config(['$routeProvider', function ($routeProvider) {

        'use strict';

        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'app/components/home/home-view.html',
            controller  : 'HomeCtrl'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'app/components/about/about-view.html',
            controller  : 'AboutCtrl'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'app/components/contact/contact-view.html',
            controller  : 'ContactCtrl'
        });
}]);

so this is my set up, for now, I just need to see that each controller for the routes are working and then I will begin adding in my content, but I have hit a hurdle straight away as the controllers for each view are showing as undefined.

Here is an example of a controller, they are all the same at the moment, but with a different message:

angular.module('appControllers')

    .controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
    'use strict';
    $scope.message = 'This will be the about page';
    }]);

the html is correct and there are no typos, so I am scratching my head as to why this is showing up as an error.

Is this something to do with the way I have my modules set up?

Any assistance would be greatly appreciated.

Many thanks in advance.

SuperVeetz · Accepted Answer · 2016-04-29 20:43:56Z

1

This error is telling you that your HomeCtrl is undefined. You will need to include a <script src="app/components/home/HomeController.js"></script> in your index.html file to include each of your controllers with this type of app configuration.

If you want to avoid this, you can scaffold your app something like this.

(function () {
    "use strict";

    angular.module('appControllers')

        .controller('HomeCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.message = 'This will be the home page';
        }])

        .controller('AboutCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.message = 'This will be the about page';
        }]);

})();

There is no single "best" way to do something. It is all relative to the needs of your app and preference.

edited Apr 29, 2016 at 20:43

answered Apr 29, 2016 at 20:14

SuperVeetz

2,1483 gold badges25 silver badges38 bronze badges

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

5 Comments

Ben Over a year ago

The tutorial I found suggested this format was best practice. This sounds like a bit of a clunky way eventhough the modules and routes are defined in the header?

SuperVeetz Over a year ago

It's personal preference. There are 2 popular ways to create angular apps. The first is how you are doing it currently, creating a directory for each state/route in your app which includes the .html and .js files. Another popular way is to create 1 module for each components. For example, you would create an app.controllers module which would house ALL of your controllers, then an app.services module which would house ALL of your services. I tend to prefer the 2nd method for smaller projects.

Ben Over a year ago

So if I create say, 10 different types of page, I would have to include a script tag for each of my controllers? My head tag is going to be pretty big. Is there any other way to ensure that my app controllers are able to pick up each individual controller?

SuperVeetz Over a year ago

Another option would be to use gulp or grunt and create a task which searches for any files in your project directory which include Controller.js in their file name, then concatenate them together into a single file. Then you would be able to include that single file in your index.html. Otherwise, you will need to include them all manually, and yes you're <head> will get large which is not good for initial load time.

Ben Over a year ago

That's what I was thinking. I could compile them into one controller.js file with gulp. Yes, I was thinking the load time would be effected by the stacking in the head. Thanks. I'll give it go.

Collectives™ on Stack Overflow

Error: ng:areq Bad Argument AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related