Moving information from one controller to another, or the process of converting a controller into a service

Question

Moving information from one controller to another, or the process of converting a controller into a service

Is there a way for me to transfer information from one controller to another? Or can I create a service from a controller? Specifically, I am looking to retrieve coordinates and store them in an object along with other variables. When I try to inject dependencies from one controller into another, it doesn't seem to work. The majority of the information in the controller below is irrelevant - all I really need are the latitude and longitude values saved in another controller.

.controller('MapCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform, $cordovaScreenshot, $ionicPopup) {

$ionicPlatform.ready(function() {

    $ionicLoading.show({
        template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
    });

    var posOptions = {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 0
    };
    $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
        var lat  = position.coords.latitude;
        var long = position.coords.longitude;
        $scope.duzina = long;
        $scope.sirina = lat;
        console.log("Širina: " + lat + '\n' + "Dužina: " +  long);
        var myLatlng = new google.maps.LatLng(lat, long);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };          

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);          

        $scope.map = map;   
        $ionicLoading.hide();   

        var marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        draggable: true,
        label: 'A',
        position: myLatlng,


        map: map,
        title: 'Trenutna Lokacija'


    });
    var labels = 'BCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;
    google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);

    });

    function addMarker(location, map) {

    var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
    });   
    }       

    }, function(err) {
        $ionicLoading.hide();
        console.log(err);
    });
})

})

javascript angularjs input controller ionic-framework

Answer 1

Answer №1

You have the option to create a factory that acts as a global object

myApp.factory('Data', function () {
    return { FirstName: '' };
});

myApp.controller('FirstCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

myApp.controller('SecondCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

Alternatively, you can utilize a service with getters and setters

//services 
app.service('Shared',function(){
var data={value :0};
return{
getData: function(){
return data.value;
},
setData: function(value){
data.value = value;
}
};
});

Answer 2

You have the option to create a factory that acts as a global object

myApp.factory('Data', function () {
    return { FirstName: '' };
});

myApp.controller('FirstCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

myApp.controller('SecondCtrl', function ($scope, Data) {
    $scope.Data = Data;
});

Alternatively, you can utilize a service with getters and setters

//services 
app.service('Shared',function(){
var data={value :0};
return{
getData: function(){
return data.value;
},
setData: function(value){
data.value = value;
}
};
});

Answer 3

Answer №2

If you want to access functions and data throughout your AngularJS application, you'll need to use either a service or factory. While they are similar, there are differences between the two. To learn more about these variances, check out this Stack Overflow thread: AngularJS : When to use service instead of factory.

To set up a service, you can follow this basic structure:

var app = angular.module('moduleName');
app.service('serviceName', [function(){
   // Your code goes here
   // For example:
   var storedValue;
   function setValue(value){
      storedValue = value;
   }
   function getValue(){
      return storedValue;
   }
}]);

In the controller that utilizes the service, make sure to inject it as well:

var app = angular.module('moduleName');

app.controller('testCtrl', ['$scope', 'serviceName', function($scope, serviceName){
   // Access the stored value
   $scope.someVariable = serviceName.getValue();

   // Set a global variable
   serviceName.setValue(someVariable);
}

Answer 4

If you want to access functions and data throughout your AngularJS application, you'll need to use either a service or factory. While they are similar, there are differences between the two. To learn more about these variances, check out this Stack Overflow thread: AngularJS : When to use service instead of factory.

To set up a service, you can follow this basic structure:

var app = angular.module('moduleName');
app.service('serviceName', [function(){
   // Your code goes here
   // For example:
   var storedValue;
   function setValue(value){
      storedValue = value;
   }
   function getValue(){
      return storedValue;
   }
}]);

In the controller that utilizes the service, make sure to inject it as well:

var app = angular.module('moduleName');

app.controller('testCtrl', ['$scope', 'serviceName', function($scope, serviceName){
   // Access the stored value
   $scope.someVariable = serviceName.getValue();

   // Set a global variable
   serviceName.setValue(someVariable);
}

Moving information from one controller to another, or the process of converting a controller into a service

Answer №1

Answer №2

Similar questions

Incorporate JavaScript code into an Angular UI-Router view

Override existing Keywords (change false to true)

What might be causing the status problem to not display correctly?

Calls to debounced functions are postponed, with all of them running once the waiting timer is complete

What is causing the issue with dynamic special characters not functioning properly in my React router?

Acquiring HTML form data using JavaScript

The regular expression for email validation does not accurately verify the portion following the period

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Are items placed into an array passed by reference or by value?

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

Nodejs functions properly on a local machine, however, it encounters issues when deployed on a VPS

AngularJS Sharepoint 2013 IE9 Sharepoint web part grouped error: The property 'replace' of undefined or null reference cannot be obtained

Ensure consistency in CSS3 background color transitions

React - Updating the Color of a Specific Div within a Map Component

It is not possible for ReactJS to disable a button that has been created dynamically

What is the method for adding npm dependencies that are not included in the package.json file during installation?

What is the best way to align the variables in this JavaScript file with the variables in Flask/Python?

Filtering ng-repeat in AngularJs based on nested data properties

Invoke a codebehind function using jQuery

JavaScript's wildcard character, *, in a regular expression will always match something