When should I use different controllers in AngularJS

Question

I am trying to make a search function in AngularJS. Here is my code for controllers:

app.controller('SearchController',['$scope', '$window','SearchService',  '$cookies' ,'$location','$routeParams',
function($scope,$window, SearchService, $cookies, $location, $routeParams) {
        $scope.homePageSearch = function(search) {
            $scope.result = '';
            $scope.count = '';
            SearchService.setSearchData(search);    
            $window.location.href = '/search/';
        }
        $scope.jobDetail = function(){  
           var slug = $location.absUrl().split('/')[4];
           SearchService.getJobDetail(slug).then(function(data){
                console.log(data)
           });
        }
        var url = $location.absUrl().split('/')[3];
        if(url == 'jobdetail'){
           $scope.jobDetail();
        }
    });   
}]);

I am calling homePageSearch function on page load. After this I am redirecting the page to /jobDetail/ and calling function jobDetail.But the problem is homePageSearch() function is also called on jobDetail page How can I avoid calling homePageSearch() function on jobDetail Page.

Shall I use a different controller for /jobDetail/ page?

I am new to angularJs please suggest me proper way to achieve this.

I think the problem is not the use of one or two controllers, but more of what are you trying to achieve with so many redirections? — Mistalis
– Mistalis, Commented Jan 31, 2017 at 10:53
I am trying to have a search page then when result shows it has a description as different page . — Kritika Shrivastava
– Kritika Shrivastava, Commented Jan 31, 2017 at 10:59

Hardik Vaghani · Accepted Answer · 2017-01-31 11:28:07Z

3

I do not have enough reputation as I am new to stack overflow, so I am posting an answer right now.

It appears from your comments that you have two different pages. So, you should definitely have two different controllers one for each. You can specify that easily using routers. I prefer using ui-router instead of ng-router.

Create a router.js file as below. You can specify your controllers to each page like this:

$stateProvider
    .state('login', {
        url: '/',
        templateUrl: '/views/search.html', 
        controller: 'SearchController'
    })
    .state('results', {
        url: '/results',
        templateUrl: '/views/result.html', 
        controller: 'ResultController'
    });

Then, you already have an idea on how to use controllers. One more important thing, please avoid using $window.location.href, because of the reason that it refreshes your page, that means it would re-initiate your application.

In fact, you should use $state.go() (if you are using ui-router) or $location.path() (if you are using ng-router)

edited Jan 31, 2017 at 11:28

Hardik Vaghani

2,18330 silver badges48 bronze badges

answered Jan 31, 2017 at 11:23

Anadi Sharma

2951 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kritika Shrivastava Over a year ago

Cool.Thanks for telling will use $location.path() and two different controllers

Anadi Sharma Over a year ago

Sure, Happy to help :)

Mistalis · Accepted Answer · 2017-01-31 11:12:10Z

From your comments, it seems you have two functionalities:

a research page
a result page

As it is two differents things on two differents pages, I would suggest you to use two controllers: one for each.

Always try to keep your controllers simple: they need to know how to do a specific task.

I highlighted the relevant parts from the Angular documentation:

In general, a Controller shouldn't try to do too much. It should contain only the business logic needed for a single view.

The most common way to keep Controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in Controllers via dependency injection. This is discussed in the Dependency Injection and Services sections of this guide.

Furthermore, I suggest you to read Divide and conquer, is it an interesting guid about front-end architectures.

Collectives™ on Stack Overflow

When should I use different controllers in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related