Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to avoid a large number of dependencies in Angularjs

I have an Angular application. Its working good, but as my application is getting bigger I'm worried about the large number of dependencies that I have to inject in each controller.

for example

app.controller('viewapps',[
    '$scope','Appfactory','Menu','$timeout','filterFilter','Notice', '$routeParams', 
    function($scope,Appfactory,Menu,$timeout,filterFilter,Notice,$routeParams) {
        //controller code..    
}])

I am sure that the list of dependencies are going to increase in future. Am I doing something wrong here? Is this the right approach? What is the best way to effectively handle this?

like image 540
harikrish Avatar asked Apr 30 '14 07:04

harikrish


People also ask

How does an object or function can get hold of its dependencies in AngularJS?

There are only three ways a component (object or function) can get a hold of its dependencies: The component can create the dependency, typically using the new operator. The component can look up the dependency, by referring to a global variable. The component can have the dependency passed to it where it is needed.

What are the advantages of dependency injection in AngularJS?

It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable. AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies.

What is $inject in AngularJS?

Dependency Injection in AngularJS can be defines as the software design pattern which defines the way the software components are dependent on each other. AngularJS provides a set of components that can be injected in the form of dependencies such as factory, value, constant, service, and provider.

Which components can be injected as a dependency in AngularJS?

The "Application Module" can be injected as a dependency in AngularJS.


1 Answers

It's hard to be specific without an exact use case, or seeing the exact code in your controller, but it looks like your controller might be doing too much (or might end up doing too much as you add things later). 3 things you can do:

  • Delegate more of the logic to service(s) that are injected in.

  • Separate out into different controllers, so each only has (just about) 1 responsibility.

  • Separate out into directives, each with their own controllers and templates, and allow options to be passed in, and output given out, via attributes and the scope option of the directive. This is often my preferred option, as you end up building a suite of reusable components, each with a mini-API.

    It is fine for directives to be used like this, at least in my opinion. They aren't just for handling raw Javascript events, or accessing the DOM directly.

like image 127
Michal Charemza Avatar answered Sep 16 '22 14:09

Michal Charemza