Skip to content

Comment on AngularJS Performance in Large Applications

Comments

A couple of times, the article mentions using:

services and object references to propagate object changes between scopes.

There are so many ways to wire things up in Angular -- references, watches, broadcast/emit -- that I'd love to see some examples from the author, who seems to really know what he's doing.

For example, say I have a `userService` that maintains a small `user` model with username, name and roles properties. What's the most performant and maintainable way of "binding" to changes to this object so when I call, e.g.: `userService.logout()` somewhere, some component I write can pickup the change and adjust it's state / UI accordingly?

I think the only way to do what you want with your service is by injecting rootScope and using $emit, since we're trying to capture a "logout" event and tell our other controllers about it.

Reacting to the specific event would likely waste less resources than pulling out the $watch or $watchCollection sledgehammer.

What works well for me is having the service return an object (named `data`) alongside the functions like `logout`, which contains another object with the actual model (`user`). Then, in controllers, I assign it to $scope.data and $watch('data.user') which reflects the changes in the controller since it this object is being shared by reference among all controllers and directive that inject the service.

Create an angular factory with a standard observer pattern. So you register the callback with something like MyFactory.register(updateUI()); and call MyFactory.notify(); after userService.logout(); which calls all the registered functions.

AboutSource Built by g1lg1l

Hackerly is an independent reader for Hacker News, built on the public HN API. Not affiliated with Y Combinator.