Ways to transfer data from one page to another using AngularJS

Question

Ways to transfer data from one page to another using AngularJS

Hey everyone, I could really use some assistance with AngularJs. My code is quite lengthy, so I have uploaded a document file for you to review. The code snippet below shows my authentication process for email and password. The customerlogin() method returns JSON data that I need to display on the next page. Essentially, I want to pass the data from customerlogin() to then() and then to /customerprofil.

I'm following instructions from my boss, but I'm having trouble transferring data to another page using AngularJS. Can someone please help me avoid any duplicate code?

Here's the code

<div class="panel-body" ng-app="agfullstackApp.customerprofile">
    <form action="">
        <div class="form-group" ng-controller="customerprofileComponent">
            <label class="col-md-2 control-label" for="inputDefault">{{full_name}}</label>
        </div>

javascript angularjs angularjs-scope

Answer 1

Answer №1

One way to share data between pages in Angular is by using a service. However, keep in mind that the data will be lost if you refresh the page. Here's an example of how to implement this using a service:

angular.module('myServiceModule',[])
.service('myService', function() {
    var savedData = {}
    this.setData  = function(data) {
        savedData = data;
    }
    this.getData = function() {
        return savedData;
    }
});

Next, you can set data from controller 1:

app.controller('View1Ctrl', ['myService', function(myService) {
    myService.setData("some data from view 1");
}]);

To retrieve the data from controller 2:

app.controller('View2Ctrl', ['myService', function(myService) {
    console.log(myService.getData());
}]);

If you need your data to persist even after a page refresh, consider using localStorage. You can check out the angular-local-storage module here: https://github.com/grevory/angular-local-storage (This module provides cookie fallback for unsupported browsers or storage capacity issues)

Answer 2

One way to share data between pages in Angular is by using a service. However, keep in mind that the data will be lost if you refresh the page. Here's an example of how to implement this using a service:

angular.module('myServiceModule',[])
.service('myService', function() {
    var savedData = {}
    this.setData  = function(data) {
        savedData = data;
    }
    this.getData = function() {
        return savedData;
    }
});

Next, you can set data from controller 1:

app.controller('View1Ctrl', ['myService', function(myService) {
    myService.setData("some data from view 1");
}]);

To retrieve the data from controller 2:

app.controller('View2Ctrl', ['myService', function(myService) {
    console.log(myService.getData());
}]);

If you need your data to persist even after a page refresh, consider using localStorage. You can check out the angular-local-storage module here: https://github.com/grevory/angular-local-storage (This module provides cookie fallback for unsupported browsers or storage capacity issues)

Ways to transfer data from one page to another using AngularJS

Answer №1

Similar questions

An AJAX script for dynamically adding, modifying, and removing records from a database

Unable to fetch information from the local host using an AJAX request and PHP script

JavaScript: The element containing only text

Using Blazor to reference an AngularJS service from within a controller within a Custom Element or Web Component

Is there a way to prevent the Material UI Chip component from appearing when there is no content present?

What is the best way to identify the ID of a clicked element?

Is it secure to send the one-time authorization code for Google+ Hybrid server-side flow over HTTP?

"Troubleshooting 404 error when using Vue.js and vue.config

Tips for automatically refreshing a Next.js application following an update in an external library

Having issues with your Spring Boot POST request functionality?

Strategies for handling multiple HTTP error messages in AngularJS: Ensuring usability amidst errors

Ajax loaded scripts are unable to access global variables

What might be causing my mongoose query to take so long? (~30 seconds)

Using Angular Material to alter the value of ng-model in the user interface

The reducer I have is inexplicably returning undefined even though I'm certain it was added to combineReducers

Receiving a `combined` error when updating Meteor isopacket - sourcemapConsumer.destroy function is not recognized

Obtaining data from one form to validate on the web in Lotus Notes

Tips on enclosing <li> elements within <ul> tags

What is the best approach in Mongoose to utilize lookup when the local field contains an array of values in a single dimension

Ways to include scrolling specifically for one template