Best practices on services, controllers and directives for Angularjs 1.3.X

[asicfr asicfr]

Hello, i'm looking for best practices on services, controllers and directives for Angularjs 1.3.X.

Here is the rules i noticed :
- The view (html) knows only the main controller and his scope
- A directive should not have his own services

So :
- The view (html) cannot call the services directly.
- The view (html) must use the main controller to access the services.
- The view must declare the binding between the directive and the main controller

And then :
In the code, if a directive have to call a business function F1 of services :
- the main controller must publish a function F2 which wrap the function F1
- the view must declare F2 in the directive configuration

You can look at the picture attached for a more visual explaination.

Questions :
- Are you agree with those rules and the style of code ?
- Do you have any additional rules ?
- Why should we not follow these rules ?

[Sander Elias]

Hi Asicfr.

- The view (html) knows only the main controller and his scope

Not true, the template/html, knows:

• the scope of the defined ngController
• the defined controller itself when the controllerAs is used.
• all he $parent scopes.
• the controllers from directives when exposed with controllerAs

 

- A directive should not have his own services

also not true, there is no issue injecting services into directives, and/or directives controllers.

 

So :
- The view (html) cannot call the services directly.

It can, but it's not somethign taht's done often.

 

- The view (html) must use the main controller to access the services.

It can use any of the above mechanisms

 

- The view must declare the binding between the directive and the main controller

Among quite some other options yes,

Given the above I think you might need to reevaluate.Angular does not enforce strict rules on how you code.
It provides guidance, on how to implement long proven paradigms, but you are free to program as you want.

Regards
Sander

[Tony pee]

In the case of generic directives, you often want to use binding and restrict them to not using application specific services. In the case that you create 'components' to build your application, these components might be directives - which DO access application specific services. 

Controllers might expose services to the view via placing them on the scope. I do this all the time. 

In the case that you want a generic directive to reveal complex functionality, you might want to expose the directives controller. This could be done via a binding (imagine <span myDirective="directiveController"> - where the variable directiveController on the scope now gives reference to the directives controller). This could also be done via an accessor service, where the directive uses a binding to assign an id to itself, then you use a service to access its controller - this is how the ionic framework does it. 

So, i think your 'rules' are broadly correct, but there are plenty of other patterns that can be used in more complex situations. 

--
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 angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Tony Polinelli

[asicfr asicfr]

Thanks everyone.

I'm a Java developer and we generaly not bind services into view. 

Angular does not enforce strict rules on how we code, but it's not a reason to do wrong.

That's why i'm looking for best practices.

Bye

 

[Ward Bell]

Checkout John Papa's Angular style guide which has a lot of traction and many approving noises from the Ng team itself: https://github.com/johnpapa/angularjs-styleguide

You have learned on this thread the many things you COULD do but, as you noted, you are looking for guidance.

I think your principles are good ones and you'll find them in John's guide.

Two notes w/r/t advice given earlier in the thread.

First, I have no quarrel with invoking services in directives and controllers after injecting them but I wouldn't code what those services do into the controller or directive.

It's a separation of concerns thing. For example, a controller or directive should not make calls on the server directly but rather through an injected service that performs the task required.

Second, a view should only interact with the controller through a binding. The controller may or may not be visible to the view ( it generally is not visible when the view and controller at mated by a router).

The controller may expose a binding point which causes the controller to exercise a service on the view's behalf, e.g. refresh a list from server data. Of course the controller does this by calling upon an injected data service. My controller would not expose the service itself but rather a controller method that invokes the data service.

The value of all this indirection is

- clear and distinct responsibilities
- easier testing
- shorter, easier to maintain components

Remember, I'm giving you recommended practices. You can do what you want.

[asicfr asicfr]

Thx Ward.

I wish to back to that sentence : 

       The controller may expose a binding point which causes the controller to exercise a service on the view's behalf, e.g. refresh a list from server data.

       Of course the controller does this by calling upon an injected data service. 

       My controller would not expose the service itself but rather a controller method that invokes the data service.

It can become annoying to repeat the same function encapsulating the call to service for many controllers.
How can we centralize this kind of function ?

Thx

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/fIZnAL3sEpo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

https://plus.google.com/106773736261956794981

http://www.viadeo.com/fr/profile/stephane.labbe3

http://techasite.blogspot.fr/

http://quotitech.blogspot.fr/

https://github.com/asicfr