Every time I navigate from page1.html to page2.html in AngularJS and then return back to page1.html, my page model data disappears. Can someone please help me figure out how to preserve this data?
I've looked at other questions on this topic but couldn't grasp how to solve this issue using services in AngularJS.
It seems like you are looking to share state between two different views in your application. There are multiple ways to accomplish this, with one option being to use a service.
var app = angular.module('myApp', []);
app.service('myService', function(){
var data;
this.setData = function(d){
data = d;
}
this.getData = function(){
return data;
}
});
app.controller('myCtrl1', function($scope, myService){
$scope.data = myService.getData();
//perform actions
});
app.controller('myCtrl2', function($scope, myService){
$scope.data = myService.getData();
//perform actions
});
Services in Angular are singleton instances that are created once and then stored for future use. By injecting the service into your controllers, you can access the shared data whenever needed.
Implement the local storage concept in your code to store data directly in the browser. This allows you to access the data even when navigating away from the page. You can refer to the sample code provided below.
<html ng-app="app">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2838c85978e8390cc8891a2d3ccd3ccd7">[email protected]</a>" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function(
$scope,
$localStorage
){
$scope.$storage = $localStorage.$default({
x: 42
});
});
</script>
</head>
<body ng-controller="Ctrl">
<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
</body>
</html>
Consider integrating both HTML elements within the same application to prevent any data loss. Utilize routing views to effectively display both HTML sections.
It is important to note that switching between different HTML elements may result in data loss. Angular framework is specifically designed for single page applications.
app.initialize(function($rootScope) {
$rootScope.title="variation";
});
//Main controller
app.controller('mainController',function ($scope,$rootScope){
console.log("Scope title: ",$scope.title);
});
In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...
Here is an example showcasing intercomponent communication I am looking to achieve a slightly different functionality. Let's say I want the pane content to act as a tab name. For instance <my-tabs> <my-pane>Hello</my-pane> < ...
Currently diving into the world of Reactjs and working on creating a basic component. I'm puzzled about why this particular syntax for a component: import React, { Component } from 'react'; export default class AboutPage extends Component { ...
Given the string: "2022/05/01 03:10:00", I am seeking to create a Date object with Chile's UTC offset. The challenge lies in the fact that due to Daylight saving time (DST), the offset changes twice annually. How can I obtain that Date obj ...
When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...
Within my front end JavaScript application, I need to execute an ajax request in order to retrieve data from the server. Once this data is acquired, I aim to display it within the view. var retrievedData; $.ajax({ url:"/getDataFromServer.json", ty ...
I am struggling with the following code. <input type="text" name="1" class = "inp<?=$p?>"> <input type="text" name="2" class = "inp<?=$p?>"> <input type="text" name="3" class = "inp<?=$p?>"> <input type="text" na ...
Hey there, thank you for taking the time to read this. Below is the code I'm currently working with: scripts/complete_backorder.php <?php if(!isset($_GET['order_id'])) { exit(); } else { $db = new PDO("CONNECTION INFO"); ...
Hi everyone, I'm trying to create a "export to excel" functionality in Node.js for a page. By using Chrome DevTools, I discovered that the file is downloaded after a post request, so I need to replicate it. var request = require('request' ...
Within my angular.js application, I have a textarea element set up like this: <textarea ng-model='model.content'>{{model.content}}</textarea>. When the user makes changes to the content in the textarea and clicks a button, I need to ...
I am in the process of creating a forum-style website and I am in search of a unique open source HTML template that includes an editable text box where users can input their posts, similar to what is seen when posting a question or answer. I believe there ...
Use Case: I need to display a processing screen during asynchronous calls to keep end users informed about ongoing activities across multiple sections of the website. To achieve this, I decided to create a reusable component at the global level. Issue: As ...
import React from 'react'; import styled from "styled-components"; import {Col, Row} from "antd"; const TitleBig = styled.div` font-family: "Bebas Neue Pro"; font-size: 20px; `; const TitleSmall = styled.div` ...
Background In pursuit of my Free Code Camp back end certification, I am embarking on the task of creating a voting application. For detailed information and user stories required for this project, visit this link: Among the user stories is the ability to ...
On the previous page, I have created a form with a checklist containing options for colors: red, green, and blue. If the user selects red, the background color on the next page should change to red. If green is selected, the background color will be green ...
Currently facing an intriguing scenario that is causing me some confusion. This question is specifically for those well-versed in Angular UI Grid, but all responses are welcome. The situation revolves around a UI Grid with a dropdown functionality impleme ...
Our team is considering transitioning our asp.net forms application to MVC. Currently, we utilize outlook-style navigation with ASP controls such as listview and accordion, using code referenced here. Are there any jQuery/CSS controls available for MVC t ...
I have a text box where I need to save the chosen date from a calendar. To achieve this, I am using an AJAX calendar extender and setting the target control property to the textbox ID. However, when I click on a button on the same page, I lose the selected ...
Hello there, I have an array of objects that I am attempting to map through. const monthObject = { "March 2022": [ { "date": "2022-03-16", "amount": "-50", &q ...
In my model, doc, or record, there is no field labeled as id. So, how is it possible that done(null, user.id) works? I do have an _id but not an id. It seems like a passport object is being added to my session with the _id of the user in the database. But ...