0

I am new to AngularJS and I am trying to make sure I do everything correctly. I have just come across something which I think could be improved, so I thought I would ask it here. I have 2 controllers:

.controller('RecentOrdersController', ['OrderService', function (service) {
    var self = this; // store our controller in a variable

    self.loading = true; // This is what the ajax loading gif looks at to see if it should be displayed
    self.orders = []; // Our orders array

    service.recent(30).then(function (response) { // Get the 30 most recent orders
        for (var i = 0; i < response.data.length; i++) {
            var order = response.data[i]; // Store the order in a variable (for use later)
            var desciption = service.getDescription(order); // Get our description

            order.description = desciption; // Set our order description
            self.orders.push(order); // Push our order to our array
        }

        self.loading = false; // Set our loading flag to false (hide the ajax loading gif);
    });
}])

.controller('SyncFailureOrdersController', ['OrderService', function (service) {
    var self = this; // store our controller in a variable

    self.loading = true; // This is what the ajax loading gif looks at to see if it should be displayed
    self.orders = []; // Our orders array

    service.syncFailures(30).then(function (response) { // Get the 30 most sync failures
        for (var i = 0; i < response.data.length; i++) {
            var order = response.data[i]; // Store the order in a variable (for use later)
            var desciption = service.getDescription(order); // Get our description

            order.description = desciption; // Set our order description
            self.orders.push(order); // Push our order to our array
        }

        self.loading = false; // Set our loading flag to false (hide the ajax loading gif);
    });
}])

As you can see, these 2 controllers are nearly identical. The only differences are that they call different functions from the same service. What I would like to do is (somehow) create a base controller or something like that, where I won't be repeating code so much.

In fact, most of my controllers have a self.loading variable, so it would be good if I could create a base controller that always has that variable exposed.

If I am way of point, please let me know what I could do to make my code better.

r3plica
  • 13,017
  • 23
  • 128
  • 290
  • Javascript have some workarounds to simulate inheritance, and you can apply it to your controller, but i dont think it's the best/recommended solution. Take a look 'javascript inheritance' – m.rufca Mar 10 '15 at 19:14

1 Answers1

1

You should create a service (or factory) on which you would put the code that is shared. Then each controller wold only need to call this service with different parameters. Do not try to create an upper controller, service is the way to go.

floribon
  • 19,175
  • 5
  • 54
  • 66
  • 1
    To add-on...Controllers should be as "thin" as possible. That type of logic should probably be in a service/factory. For beginners, I HIGHLY suggest taking a look at this: http://stackoverflow.com/questions/20286917/angularjs-understanding-design-pattern – Noah B Mar 10 '15 at 21:24