When you should use Directives,controllers or service in Angularjs

Original: http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/

Services

The service is singleton. Allows you to share the same data in different blocks of code that you apply.

First define a module.

var module = angular.module ("My.new.module", []);

Next, create a service named book, which has a JSON object that contains the data for some books.

Module.service (' book ', [' $rootScope ', function ($rootScope) {   var service = {     books: [       {title: ' Magician ', Author: "Raymond E. Feist"},       {title: "The Hobbit", Author: "J.r.r Tolkien"}     ],      addbook:function (book) {       Service.books.push (book);       $rootScope. $broadcast (' books.update ');     }   }    return service;}]);

$rootScope. $broadcast notifies other components that use the book Service books data has been updated. Now let's get this service to any controllers, directives, filters that needs him-so they can access the properties and methods of the book Service.

var ctrl = [' $scope ', ' book ', Function (scope, book) {   scope. $on (' Books.update ', function (event) {     Scope.book s = book.books;   });    Scope.books = Book.books; }];  Module.controller ("Books.list", ctrl);

　　

We assign the books array in the book Service to the books property of the controller's scope object.

So what's the point of doing this? Why don't we create this books array directly inside the controller so that we don't create the book Service, which can save a lot of time. Yes-it is indeed possible to save time-but what if we need to use this books array elsewhere? It is not recommended to manage data directly through scope. Scopes is easily polluted by other controllers and directive. Centralized processing of book data in a unified place is recommended for a slightly larger application. It keeps your data in a modular format.

CONTROLLERS

The controller should simply connect the service, dependency, and other objects and upload them to the view page via scope. If you have more complex business logic in your view, it's also a good idea to put those logic in the controller.

What should we do if we add a book? Should you add a method to the controller to handle it? No, this is part of the DOM interaction. This should be added to the directive.

Directives

In all the various angular applications I've written, I feel that the most complicated and difficult thing is directives. In this article we provide a button to add a book using the service.

Angular defines directive as a block of code that you can use to manipulate the DOM and interact with it.

Module.directive ("Addbookbutton", [' Book ', Function (book) {   return {     restrict: "A",     link:function (scope , element, attrs) {       element.bind ("click", Function () {         Book.addbook ({title: "Star Wars", Author: "George Lucas " } );       });     }   }}]);

The code above is simple. I created a directive and added a new book using the service. The code for using this directive is as follows

<button Add-book-button>add book</button>

As you can see, we use this directive through attribute. Why don't we add a new book to our controller by adding a method:

$scope. Addbook = function () {  Book.addbook ({title: "Star Wars", Author: "George Lucas"});

The result of adding a new book in Directive or controller is the same, so why do we put it in the directive instead of the controller? If I want to add a new book in another location, do I have to copy the code inside the controller and copy it to the place where I want to add this feature? This creates duplicate code and makes maintenance difficult. You can avoid these problems by directive to deal with this.

When you should use Directives,controllers or service in Angularjs