Should one avoid including regular Javascript objects in AngularJS controllers?

Question

I'm reading Pro AngularJS by Adam Freeman, and I have a nitpicky question concerning one of the book's examples:

myApp.controller("tomorrowCtrl", function($scope) {
    var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday";]
    $scope.day = dayNames[(new Date().getDay() + 1) % 7];    
});

I understand what this controller's overall purpose is: to show the name of the day of the week on the view via $scope.day. But I'm confused about why the controller is using an ordinary Javascript array - var dayNames - to create the $scope object.

The AngularJS controller documentation explains that controllers are used to:

set up the initial state of the $scope object [and to] add behavior to the $scope object.

And sure enough, dayNames helps set up the initial state of the $scope object. It also contains a bit of the application's business logic, so I guess it sort of checks out. My worry is that I haven't found any other examples of AngularJS controllers that follow this design pattern; I haven't found anything in the Angular controller docs, nor the PhoneCat tutorial.

Does it make sense to include ordinary Javascript objects in AngularJS controllers like this? (Is this considered harmless?)

If not, why? Are there any good reasons to not include ordinary Javascript objects in controllers? Also, is there a different way that dayNames should fit into the Angular schema, like a directive or a service?

I guess they have no reason to expose dayNames so they're not binding it to $scope? — Nicholas Hirras
– Nicholas Hirras, Commented Feb 5, 2015 at 18:39

Tseng · Accepted Answer · 2015-02-06 15:42:03Z

3

You'll see plenty of examples like that in books & the internet. The point is that the $scope.day is set to something and I'm sure how it reflects it within your view.

You can have external plain Javascript logic and use it within angularJS, it obviously won't break anything, but typically it's good practice to have ALL scope manipulation / business logic done outside of the controller in a service/factory/provider. Why go against angularJS and use external things? You want to stick within angularJS's flow.

Let's say it was doing something much more complicated, it would of probably looked more like this:

myApp.factory("tomorrowService", function() {
    // factory's can be written in many different patterns
    // this is just for examples sake
    return {
        getDays : function () { /* return stuff */ }
    }
});

myApp.controller("tomorrowCtrl", function($scope, tomorrowService) {
    $scope.day = tomorrowService.getDays();    
});

With a method within tomorrowService doing all the business logic and returning some sort of result.

I found this article (http://toddmotto.com/rethinking-angular-js-controllers/) very imformative to help get a better idea of how to make your controllers and the separation that is beneficial within an angularJS project.

edited Feb 6, 2015 at 15:42

Tseng

64.5k18 gold badges200 silver badges215 bronze badges

answered Feb 5, 2015 at 18:43

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

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

2 Comments

New Dev Over a year ago

And to nitpick, it should properly be named tomorrowService - the factory is only the function that generates the instance of the service :)

Mark Pieszak - Trilon.io Over a year ago

I typed too quickly. You win :) Fixed @NewDev

New Dev · Accepted Answer · 2015-02-05 18:43:59Z

1

Does this data belong only in that controller and nowhere else in the app?
Does this data directly support the generation of the View Model (as opposed to a business logic)?
Does this create a "fat" controller (i.e. makes the code hard to follow)?

(I don't know if the list is comprehensive)

If the answers are "no", then it's probably OK to keep it there.

Not everything has to be on the $scope. I sometimes see this in questions:

$scope.init = function(){
  // do some initialization
}

$scope.init();

Clearly, there was no reason to attach init onto the scope and would be better declared as a named function defined in the controller:

function init(){
}

init();

answered Feb 5, 2015 at 18:43

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Collectives™ on Stack Overflow

Should one avoid including regular Javascript objects in AngularJS controllers?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related