I have two pages with two different controllers, Master and Detail.
Master consists of list of data from database, and an add button in toolbar,data is fetched from db in controller initializers ,when user taps on add button it will go to Detail page and enters the data and then click the save and gets back to the Master page.
Now how can I refresh the Master page data, since the page already exists the controller initializer is not called.
You need to have something called factory in order for data to be persistent and also maybe .run in Angular to get the data on the initial start of the app.
Research a bit on https://docs.angularjs.org/guide/services and .run https://docs.angularjs.org/guide/module
Related
I have a datatable in my code on a view page of transaction and to update a child entry from it I have to route to child page, When I edit and update the child and route to view page again . The page number is reset to one .Please tell me how to retain the selected page number
You could use a service to store such data that should "survive" navigation between pages.
Services are injected into the controllers and are signletons = the service object is created by angular only once and the same object lives as long as you do not leave the angular app or F5 refresh the app.
(I did not explain how to use a service, as you can find many examples and great documentation about it)
I don't know if prevent the controller from reloading is exactly what I need.
I have the following scenario:
A view called client.list.html and it's controller ClientListController (list clients).
A view called client.html and it's controller ClientController (create and edit client)
On the client list, there's a button to edit the clients and some pagination.
What I want to do is:
When the user clicks to edit the client and go back to the list, the information (like selected client, current page and results) should be there still. But the controller gets reloaded and everything is lost.
As of my understanding you want to let the data binded to the view still there, correct me if this is wrong.
I had a similar problem where I had to keep the certain data on the view once loaded even if the view is reloaded. In this case you can bind the data to the view through $rootscope. There is only one $rootscope for the application and will not reload even if the view is reloaded.
I've been using Ionic/AngularJS in several projects and I'm always struggling on the same issue.
I process some data with several kinds of displays (list, map) and when the user clicks on an element, it redirects him to a details page.
It should be good if the framework allows us to keep the UI state of the previous view, so when the user clicks on the back button on the details page, the previous page holds infinite-scrolling position or google map state.
As a workaround, my details page are always modals so when the user wants to go back, the modal closes and the background content state is kept. Nevertheless, this is not an ideal way of coding because the code is way harder to understand, and some problems happens concerning memory (imagine that the details page is linked to another details page, so you have modals opening infinitely...)
Is there a way to keep UI state of a page?
Just to clarify, I'm not talking about variables state (easy to store: $rootScope, localStorage, POST variables, cookies...).
TL;DR:
I have a google map, when I click on a marker, it's redirecting me on a details page, when I go back, I want to get the google map state back, how can I do it?
I think you can create a controller which will be used as a base controller for your other controllers. You can put some data in this base controller and inject it in your controllers responsible for google maps and its details
I'm building a wizard-config app with 3 pages. Each page has the same MasterController but different html templates. Each html templates has a different controller, say ControllerOne, ControllerTwo, and ControllerThree.
I load the data via MasterController and I'd like the data and any changes the user makes to be stored temporarily until the save & finish step on the final page. Trouble is as the user goes through the pages, MasterController is called each time and each time it fetches the data and overwrites the user's changes.
I've thought about attaching this data to a service or rootScope but the data initialization still happens in MasterController so the data would still be overwritten when each view is loaded.
Any advice on how I should go creating this functionality or restructuring my app to support this?
EDIT:
To be clear on the service issue. I don't know where to initialize it. If I do it in Controllers 1,2 or 3 my data is reinitialized each time the view changes so that doesn't work. I can't do it in app.run() either because I need to get to MasterController in order to get the necessary ID to make my HTTP request. I can't do it in MasterController because that too is called on each page switch.
Ideally I'd have a view within a view so that only the inner view changes. However angular does not support nested views and I'm trying to find a way around this without having to use angularUI.
To get around the data being loaded from the server on each page change and overwriting the user data, I used an "extend" function (like jQuery's) to extend the server data with the user data on each load. Page changes would call my service(that stores the temporary data) to save the data there and the final "save and finish" button would push the data in the service to the server.
I'm learning backbone.js to add some interactivity to an existing web app. On initial page load I'm bootstrapping some initial data into the page, using the reset() method suggested in the docs. This works great. I can also create new model instances, and the view handles them just as I would expect; they show up alongside the initial data, and everything is fine. (The new data also hits the database just fine.)
However, if I click on a link to a different page (not using backbone routes or anything, just a normal link) and then hit my browser's back button, the new models I created previously are gone; only the old initial data shows up. I've done some debugging and found that the reset() method runs each time the page is loaded, so presumably that's what's nuking the additional data I'd added. (However, if I actually refresh the page, the new data will be displayed again, since now it's getting bootstrapped in too.)
I know I could use fetch() to get the newly-added data (along with the older data), but I'm trying to avoid that, both because (a) that's an extra request every time the page is loaded, and (b) because the docs say that's not ideal.
So, what should I do so that using the back button doesn't make stuff (temporarily) vanish?
Page loads models, views, collections and Routers. Page set's up the collection through reset(bootstrapping). User clicks link to navigate to another page, clicks the back button. Something interesting happens now,
Routers match the url before the page is loaded ( when clicking back button). During this match you must verify that the collection contains new data and then do collection.fetch().
This will make you get latest always and hit the server only once (Either your collection is empty or it does not contain fresh data)