What are the benefits of AngularJS dependency injection?

Question

I've already worked with angular several times, and I don’t see how this improves from my previous coding method.

Firstly, I don’t see what is wrong with the fact that you have a central object for storing your project. An injector is a singleton that looks for your dependencies in a central place, so angular has a central object, it's just hidden. Nemppang does not necessarily mean joining if done correctly. Even if this is done, you do not need each object in your code to be loosely coupled to others. In addition, anytime you create a stand-alone JS script, you must wrap it in angular to make them play well together.

Secondly, it’s very difficult to declare all your dependencies every time (especially with a minification), so there is no benefit in terms of readability compared to the correct namespace.

Thirdly, the performance gain is minimal. This forces me to use singletones everywhere, but I can do it myself if necessary, and most of the time I don’t do it (network and DOM manipulations are my bottle neck, not JS objects).

In the end, I like the "improved" HTML code and automatic two-way bindings, but I don’t see how injection makes it better than other frameworks dealing with dependencies, given that it does not even provide dynamic loading, such as require.js . I do not see the case when I say to myself: “Oh, this is where it is much better than before, I see” when coding.

Could you explain to me what advantages this technical choice makes for a project?

So far I see only one: agreement and best practice. This is great to create the lib ecosystem, but so far I do not see it in the angular community.

Answer 1

For me, there are several aspects of how Angular dependency injection improves my projects, which I will list here. I hope this shows you how OTHERS can benefit from it, but if you are a well-organized and experienced JS developer, it may not be the same for you. I think at some point it is only a matter of developing your own coding tools and guides.

Unified, declarative dependency resolution

JS is a dynamic language (this new one, huh?), Which gives more power and even more responsibility to the programmer. Components can interact with each other in various ways, bypassing all kinds of objects: ordinary objects, plain, functions, etc. They may even use blocks of code that were not even mentioned for use by other components.

JS never had (and most likely never will) have a single way to declare public, private or batch (modular) domains, such as other languages ​​(Java, C, C #). Of course, there are ways to encapsulate logic, but ask any newbies in this language, and they just don't know how to use it.

What I like about DI (not only in Angular, but also in general) is that you can list the dependencies of your component, and you are not worried about how this dependency is built. This is very important to me, especially that DI in Angular allows you to allow both components: they are from the structure itself (e.g. $http ) or custom (e.g. my favorite eventBus , which I use to transfer $on event handlers).

Very often I watch an ad announcement, and I know what it does and how it does it, just by looking at the dependencies!

If I were to construct and / or use all those objects that are inside the component itself, I would always need to carefully analyze the implementation and check it from different angles. If I see localStorage in the dependency list, I know that I use local HTML5 storage to save some data. I do not need to look for it in code.

Component Life Span

We no longer need to worry about the initialization order of some components. If A depends on B , then DI will make sure that B ready when A needs it.

Module testing

This helps a lot to mock components when you use DI. For example, if you have a controller: function Ctrl($scope, a, b, c, d) , you will immediately know what it depends on. You enter the correct layouts and you make sure that all parties are talking and listening to your controller. If you have problems writing tests, you most likely messed up the levels of abstraction or violate design principles (Law Of Diameter, Encapsulation, etc.).

Good habits

Yes, most likely you could use the namespace to properly manage the lifespan of your objects. Identify the singleton where necessary and make sure that no one confuses your private members. But honestly, do you need it if the framework can do it for you? I did not use JS “the right way” until I recognized Angular. This is not something that I didn’t care, I just didn’t have to, because I used JS only for some user interfaces, mainly based on jquery.

Now it’s different in that I have a good structure that makes me keep up a little with good practices, but also gives me a great opportunity to expand it and use the best features that JS has.

Of course, poor programmers can still break even the best tool, but from what I learned recently after reading D. Crockford's “JS Good Parts”, people made uncomfortable troubles with him. Thanks to great tools like jQuery, Angular and others, we now have a good tool that helps you write good JS applications and adhere to best practices.

Conclusion

As you pointed out, you CAN write good JS applications by doing at least these three things:

• Namespacing - this allows you to add things to the global namespace, avoids potential conflicts and makes it easy to resolve the right components where necessary.
• Creating reusable components / modules - for example, by using a function module template and explicitly declaring private and public members
• Managing dependencies between components - by defining singletones that allow you to retrieve dependencies from a certain "registry", forbidding you to do certain things when certain conditions are not met

Angular just does this:

• Has a $injector that manages dependencies between components and retrieves them if necessary
• Forcing to use the factory function, which has both PRIVATE and PUBLIC API.
• Let the components talk to each other either directly (by dependency on each other), or using a common $scope chain.