How to pass data across the pages in angular js
Question
In my home page there are two links. Clicking of which should display a table with some pre-defined data. Below is the code for Main page-
adminHomeContent.jsp
<body>
<div id="page-wrapper" >
<div id="page-inner">
<a href="getfeedbackList">Get List Normal</a>
<div class="row text-center pad-top">
<a ng-click="setRoute('feedbacklist')">Get List Angular JS</a>
</div>
</div>
</div>
</body>
Problem is if I i click on Get List Normal . It's displaying the results correctly but on different page which will not be partial page update(though it can be done with iframe ). And if I click on Get List Angular it's going to the page but I am not able to send any data to the new page.
For Get List Normal we have the url mapped in the controller-
HelloController .java
public class HelloController {
@Autowired
FeedbackServices feedbackServices;
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView getData() {
System.out.println("Home Controller");
ModelAndView model = new ModelAndView("adminHome");
return model;
}
@RequestMapping(value = "getfeedbackList", method = RequestMethod.GET)
public ModelAndView getfeedbackList(ModelAndView model) throws IOException {
System.out.println("getfeedbackList Controller");
List<FeedbackBean> listFeedback = feedbackServices.getFeedbacklist();
return new ModelAndView("feedbacklist", "listFeedback", listFeedback);
}
}
And in angular js the page navigation is being done by this-
successLadder.js
angular.module('successladder', [])
.config(function ($routeProvider)
{
$routeProvider
.when('/feedbacklist', {template: 'partial/pages/feedbacklist.jsp'})
.otherwise({redirectTo: '/adminHomeContent', template: 'partial/pages/adminHomeContent.jsp'});
});
function MainCtrl($scope, $location)
{
$scope.setRoute = function (route)
{
$location.path(route);
};
$scope.showModal = false;
$scope.toggleModal = function () {
$scope.showModal = !$scope.showModal;
};
}
I can do achieve it with iframe but I want to do it with angualr js. Any idea how to implement this one in angualr js?
2 answers
solution1
0 2016-07-26 17:09:50
I don't entirely follow your use-case but does it make sense to create a service to hold the data, then inject said service in multiple controllers? Also if this list view is identical in the different locations it probably makes the most sense to write a directive to handle the actual rendering of said data.
solution2
0 2016-08-09 16:19:15
Look to create an AngularJS service. Services exist as singletons, and thus, is global across your app. So if you keep the data you want to share inside a service, you will be able to access it across different pages.
This helped me a lot when first learning about services: https://www.airpair.com/angularjs#6-services-and-factories
Hope this helped.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.