{"id":13296,"date":"2014-05-02T13:28:30","date_gmt":"2014-05-02T07:58:30","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=13296"},"modified":"2017-02-12T19:21:12","modified_gmt":"2017-02-12T13:51:12","slug":"common-functionality-among-multiple-controllers","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/common-functionality-among-multiple-controllers\/","title":{"rendered":"Common functionality among Multiple Controllers"},"content":{"rendered":"

Many a times, we see a requirement, where we have to write same functions<\/strong> in multiple controllers<\/strong> just to share<\/strong> a common<\/strong> functionality<\/strong> among them, which is a bad approach, because in future, if any changes are required to that function<\/strong>, we\u2019ll have to make the changes manually in all the copies of that function<\/strong> where it is defined or if we want to add that particular functionality<\/strong> in another controller<\/strong>, again we\u2019ll have to copy-paste the whole function<\/strong> scope<\/strong> in that controller<\/strong> too. And doing so is completely against the DRY (Don’t Repeat Yourself) principle<\/strong>.<\/p>\n

So to solve this problem, we write directives<\/strong>. Let\u2019s play more with the directives<\/strong> \ud83d\ude09<\/p>\n

NOTE:<\/strong> If you are not aware with the basics of directives<\/strong>, then I will advice you to please read the links below to get to know an idea of Directives<\/strong>:
\n1. Directive Introduction<\/a>
\n2. Components in AngularJS<\/p>\n

In my AngularJS Routes blog, we made a single page application (With user CRUD functionality) demo. We were having remove user functionality only in LIST page, but now we want to add remove functionality<\/strong> to SHOW and EDIT Page. So instead of doing copy-paste in SHOW and EDIT page, we are going to write directive<\/strong> for that as below:
\n[js]
\n\/*
\n * Defining RemoveUserFunctionality Directive, to share it among
\n * multiple controllers. This directive injects remove function to scope where it is marked.
\n * *\/
\nrouteTestModule.directive(‘removeUserFunctionality’, [‘$location’, function ($location) {
\n return {
\n scope: true,
\n link: function ($scope) {
\n \/*
\n * We remove function from ListUserController and place it here (in directive),
\n * And inject remove function everywhere with the help of this directive.
\n * *\/
\n $scope.remove = function (id) {
\n $scope.users = _.filter(users, function (user) {
\n return user.id != id;
\n });
\n users = $scope.users;
\n $location.path(&quot;\/user\/list&quot;);
\n };
\n }
\n }
\n}]);
\n[\/js]
\nLet\u2019s use removeUserFunctionality directive<\/strong> and add Remove function to EDIT and SHOW Pages as below:<\/p>\n

partials\/edit.html:<\/strong>
\n[html]
\n&lt;!– We are using remove-user-functionality directive to inject Remove function into scope –&gt;
\n&lt;table remove-user-functionality&gt;
\n &lt;tr&gt;
\n &lt;td&gt;Name&lt;\/td&gt;
\n &lt;td&gt;{{user.name}}&lt;\/td&gt;
\n &lt;\/tr&gt;
\n &lt;tr&gt;
\n &lt;td&gt;Age&lt;\/td&gt;
\n &lt;td&gt;{{user.age}}&lt;\/td&gt;
\n &lt;\/tr&gt;
\n &lt;tr&gt;
\n &lt;td&gt;&lt;a ng-href=&quot;#\/user\/edit\/{{user.id}}&quot;&gt;Edit&lt;\/a&gt;&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Remove&quot; ng-click=&quot;remove(user.id)&quot; \/&gt;&lt;\/td&gt;
\n &lt;!–
\n Here Remove function is not defined into EditUserController, its injected by
\n remove-user-functionality directive.
\n –&gt;
\n &lt;\/tr&gt;
\n&lt;\/table&gt;
\n[\/html]<\/p>\n

partials\/show.html<\/strong>:
\n[html]
\n&lt;!– We are using remove-user-functionality directive to inject Remove function into scope –&gt;
\n&lt;table remove-user-functionality&gt;
\n &lt;tr&gt;
\n &lt;td&gt;Name&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;text&quot; ng-model=&quot;user.name&quot; \/&gt;&lt;\/td&gt;
\n &lt;\/tr&gt;
\n &lt;tr&gt;
\n &lt;td&gt;Age&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;text&quot; ng-model=&quot;user.age&quot; \/&gt;&lt;\/td&gt;
\n &lt;\/tr&gt;
\n &lt;tr&gt;
\n &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Cancel&quot; ng-click=&quot;cancel()&quot;\/&gt;&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Update&quot; ng-click=&quot;update()&quot;\/&gt;&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Remove&quot; ng-click=&quot;remove(user.id)&quot; \/&gt;&lt;\/td&gt;
\n &lt;!–
\n Here also Remove function is not defined in ShowUserController, rather injected by
\n remove-user-functionality directive.
\n –&gt;
\n &lt;\/tr&gt;
\n&lt;\/table&gt;
\n[\/html]<\/p>\n

partials\/list.html:<\/strong>
\n[html]
\n&lt;!– We are using remove-user-functionality directive to inject remove function into scope –&gt;
\n&lt;table remove-user-functionality&gt;
\n &lt;tr&gt;
\n &lt;td&gt;Id&lt;\/td&gt;
\n &lt;td&gt;Name&lt;\/td&gt;
\n &lt;td&gt;Age&lt;\/td&gt;
\n &lt;td&gt;&lt;\/td&gt;
\n &lt;td&gt;&lt;\/td&gt;
\n &lt;\/tr&gt;
\n &lt;tr ng-repeat=&quot;user in users&quot;&gt;
\n &lt;td&gt;&lt;a ng-href=&quot;#\/user\/show\/{{user.id}}&quot;&gt;{{user.id}}&lt;\/a&gt;&lt;\/td&gt;
\n &lt;td&gt;{{user.name}}&lt;\/td&gt;
\n &lt;td&gt;{{user.age}}&lt;\/td&gt;
\n &lt;td&gt;&lt;a ng-href=&quot;#\/user\/edit\/{{user.id}}&quot;&gt;Edit&lt;\/a&gt;&lt;\/td&gt;
\n &lt;td&gt;&lt;input type=&quot;button&quot; value=&quot;Remove&quot; ng-click=&quot;remove(user.id)&quot; \/&gt;&lt;\/td&gt;
\n &lt;!–
\n Again Remove function is not defined in UserListController, it is injected by
\n remove-user-functionality directive.
\n –&gt;
\n &lt;\/tr&gt;
\n&lt;\/table&gt;
\n[\/html]<\/p>\n

After this, if any change is required, we have to make it only in removeUserFunctionality Directive<\/strong>, and we can use it everywhere. \ud83d\ude42<\/p>\n

NOTE:<\/strong> You can checkout full working source code from this link<\/a>.<\/p>\n

Amit Kumar
\namit.kumar@intelligrape.com<\/a>
\nin.linkedin.com\/in\/amitkumar0110
\ntwitter.com\/amit_kumar0110
\nMore Blogs by Me<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Many a times, we see a requirement, where we have to write same functions in multiple controllers just to share a common functionality among them, which is a bad approach, because in future, if any changes are required to that function, we\u2019ll have to make the changes manually in all the copies of that function […]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5,"footnotes":""},"categories":[1],"tags":[955,1419,1420,867,1300,456],"class_list":["post-13296","post","type-post","status-publish","format-standard","hentry","category-technology","tag-angularjs","tag-common","tag-controller","tag-multiple","tag-scope","tag-sharing"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t