Avoid a repeated scope variable in different controllers in AngularJS

Question

I've got few controllers working with different templates:

curryApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'table_index.html',
            controller: 'CurryListCtrl'
        }).
        when('/cities/:cityId/', {
            templateUrl: 'template-total.html',
            controller: 'CurryDetailCtrl'
        }).
        when('/cities/:cityId/mobile/', {
            templateUrl: 'template-mobile.html',
            controller: 'CurryMobileCtrl'
        }).
        when('/cities/:cityId/online/', {
            templateUrl: 'template-online.html',
            controller: 'CurryOnlineCtrl'
        }).

All of theses controllers have $scope variable called cities For example, the first one:

curryControllers.controller('CurryDesktopCtrl', ['$scope', '$routeParams', '$http', '$route',
  function($scope, $routeParams, $http, $route) {
    $scope.cityId = $routeParams.cityId;
    $http.get('json/cities.json').success(function (data) {
      $scope.cities = data;
      ...

The second one:

curryControllers.controller('CurryOnlineCtrl', ['$scope', '$routeParams', '$http', '$route',
  function($scope, $routeParams, $http, $route) {
    $scope.cityId = $routeParams.cityId;
        $http.get('json/cities.json').success(function(data) {
        $scope.cities = data;
        ...

Is it okay to have repeated $scope variables in different controllers? How should I refactor the code in order to escape duplicates?

use can controller As syntax and make alias of the controller — xkeshav
– xkeshav, Commented Jul 8, 2016 at 5:27

Rishi Tiwari · Accepted Answer · 2016-07-08 06:14:59Z

2

If cities are not going to change for every controller use services like below

Your service should look like below

 app.service('myService',function($http,$q){
      var cities=null;
      this.getCities=function()
                     {

                         var deferred = $q.defer()
                         if(this.cities==null){
                         $http.get('json/cities.json')
                         .then((response) => {deferred.resolve(response);cities=response;})
                         .catch((error) => deferred.reject(error))
                         }
                         else { deferred.resolve(cities)}
                         return deferred.defer  

                     })
        });

Use the above service in the controller

  app.controller('ctrl',function($scope,myService){
           myService.getCities().then(function(data){ $scope.cities = data;})
  })

edited Jul 8, 2016 at 6:14

answered Jul 8, 2016 at 5:22

Rishi Tiwari

1,0491 gold badge11 silver badges20 bronze badges

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

Comments

developer033 · Accepted Answer · 2016-07-08 05:29:22Z

1

You can create a factory:

.factory('citiesFactory', function($http) {
   function getCities(){
      // return promise from function
      return $http.get("json/cities.json");
   }

   return {
      getCities: getCities
   }
});

then in your controller:

curryControllers.controller('CurryDesktopCtrl', ['$scope', '$routeParams', '$http', '$route', 'citiesFactory'
  function($scope, $routeParams, $http, $route, citiesFactory) {
    $scope.cityId = $routeParams.cityId;
    citiesFactory.getCities().then(function(response){
       $scope.cities = response.data;
    });
      ...

answered Jul 8, 2016 at 5:29

developer033

25k8 gold badges85 silver badges113 bronze badges

Comments

Srijith · Accepted Answer · 2016-07-08 05:29:59Z

1

You should do create a factory like this. Forgive the syntax, but you get the idea.

app.factory('Cities', function ($http) {
return {
    'getData': function() {
         $http.get('json/cities.json').success(function (data) {
           return data;
          }
          .error(function(error){
           return [];
          }
    }
};

}]);

and in your controller inject the factory and get the data

curryControllers.controller('CurryOnlineCtrl', ['$scope', '$routeParams', '$http', '$route', 'Cities'
  function($scope, $routeParams, $http, $route) {
    $scope.cityId = $routeParams.cityId;
    $scope.cities = Cities.getData();
    ...

answered Jul 8, 2016 at 5:29

Srijith

1,4449 silver badges14 bronze badges

Comments

Cyril Cherian · Accepted Answer · 2016-07-08 05:31:01Z

0

If the cities json is common for all the controllers.

One option would be to move the common object used across controllers into rootscope refer.

Other option would be to store the cities json in the service itself read here.

edited Jul 8, 2016 at 5:31

answered Jul 8, 2016 at 5:22

Cyril Cherian

32.4k7 gold badges48 silver badges57 bronze badges

Collectives™ on Stack Overflow

Avoid a repeated scope variable in different controllers in AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related