Doing more digging on this, this article shows an example using method 2 but keeping a property on the scope in sync with the service (selectedAuthor) using events:
http://joelhooks.com/blog/2013/04/24/modeling-data-and-state-in-your-angularjs-application/ http://jsfiddle.net/joelhooks/jWmck/9/light/ The only thing I think the example is missing is that the controller should get set with whatever the current selectedAuthor is incase that author was set outside of that controller instance, so: $scope.selectedAuthor = authorListModel.selectedAuthor; On Monday, August 11, 2014 6:57:28 PM UTC-7, Colin Kahn wrote: > > There's quite a bit out there about using controllers and services > together, and was hoping to start a discussion to try and nail down some > best practices. > > There's three different methods i've seen for using controllers and > services together. They all assume (I believe) that you're holding the > state in your services, and your controllers are stateless. > > Method 1: Expose Service to Template > > This one is probably the simplest. You treat your service like a model and > you put it on scope (or on your controller and your controller on scope > using the "as" syntax) and then in your templates access its properties and > methods. > > app.service('serviceCounter', function() { > this.count = 0; > this.increment = function () { > this.count++; > }; > }) > .controller('ServiceCounterController', function (serviceCounter) { > this.serviceCounter = serviceCounter > }); > > <div ng-controller="ServiceCounterController as serviceCounterCtrl"> > {{serviceCounterCtrl.serviceCounter.count}} > <button ng-click="serviceCounterCtrl.serviceCounter.increment()">Add One > </button> > </div> > > Method 2: Wrap Methods in Controller > > For this, you create a specific API in your controller that uses methods > from your service: > > app.service('serviceCounter', function() { > this.count = 0; > this.increment = function () { > this.count++; > }; > }) > .controller('ServiceCounterController', function (serviceCounter) { > this.getCount = function () { > return serviceCounter.count; > }; > this.addOne = function () { > serviceCounter.increment(); > }; > }); > > <div ng-controller="ServiceCounterController as serviceCounterCtrl"> > {{serviceCounterCtrl.getCount()}} > <button ng-click="serviceCounterCtrl.addOne()">Add One</button> > </div> > > Method 3: Reassign Service Methods to Controller > > Here, you would reassign your methods onto the controller: > > app.service('serviceCounter', function() { > var count = 0; > this.increment = function () { > count++; > }; > this.getCount = function () { > return count; > }; > }) > .controller('ServiceCounterController', function (serviceCounter) { > this.getCount = serviceCounter.getCount; > this.addOne = serviceCounter.increment; > }); > > <div ng-controller="ServiceCounterController as serviceCounterCtrl"> > {{serviceCounterCtrl.getCount()}} > <button ng-click="serviceCounterCtrl.addOne()">Add One</button> > </div> > > Obviously if someone has better examples of any of these please share. > > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - > > My pros and cons list is as follows: > > *Method 1: Expose Service to Template* > > *Pro:* > > - Simple, very obvious where you're accessing the properties and methods > - Able to bind to the services properties without needing a $watch in your > controller or using events > > *Cons:* > > - Verbose, your template expressions become very long due to the > repetition of the name > - Service is coupled with templates, changes to how the service works > could break your UI > > > *Method 2: Wrap Methods in Controller* > > *Pro:* > > - Still obvious where methods and properties come from (everything goes > through the controller) > - Service is not coupled with the templates, if the service changes your > controller methods can be updated without touching the templates > > *Cons:* > > - Verbose, everything needs to be wrapped > - Properties must be accessed through methods, increasing function calls > during each watch cycle > > * Method 3: Reassign Service Methods to Controller* > > *Pros:* > > - Less verbose than method 2, while keeping some separation between the > service and the template > - Service acts more like a module with private state > > *Cons:* > > - Could be unclear how things are being updated since `this` is actually > the `this` of the controller > - Still can't bind directly to properties, state must be wrapped in > functions > > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - > > If you've got any insight, or have tried these methods to success please > post. Also, if I've left any ways of doing this out I can update this post. > > > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
