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.
Related
In an AngularJS Single Page Application, if you are in the main page and now you route to the second page, and use the "service" (as a global), and use myService.cityName to pull data using AJAX (by using $resource), that's fine.
But what if on your page header, you also have an input text box, and you can type in a city name, and when the user press Enter, you are routing to the same page (the second page). So I think browser didn't do anything because it is the exact same URL. How would you solve this issue or what is the AngularJS's way of handling this?
(Update: it is not to refresh or reload a page... it is about, say, you get weather data for a city, and you are on the forecast subpage, with a path of #/forecast. Now at the top search box on the page, you enter a different city and click "Submit" to go to the same path #/forecast then nothing will happen)
Update2: essentially, in my controller code:
$scope.submit = function() {
$location.path("/dataPage");
}
and my form is <form ng-submit="submit()">.
so if I am already on the dataPage, then now browser wants to go to dataPage to show new data, but since the path and hash is exactly the same, the browser just will not do anything. (I suppose due to no hashchange event happened, so nobody will notify AngularJS to do anything)
Your question is unclear, if you want a page refresh like F5, one solution is at "Solution for refresh page". But if you just want to reload things, you could follow "Solution for reload page".
Solution for refresh page:
To update a page, all that you need to update the model data of controller and the page will be updated accordingly. Ideally, you should never refresh an entire page in AngualrJS . If you need to do so, you are not using AngularJS correctly .
The $location service does not provide access to refreshing the entire page. If you need to refresh the entire page, you need to use the $window.location object.
$window.location.href = "YOURPAGEPATH";
Solution for reload page:
just want to reload things under ng-view, re-initialized the current route controller, you could do like below.
$route.reload("YOURPATH");
$route.reload() will reinitialise the controllers but not the
services.
If you want to reset the whole state of your application you can use:
$window.location.reload();
This is a standard DOM method which you can access injecting the $window service
Also see: $route documentation
According to $route documentation:
Causes $route service to reload the current route even if $location
hasn't changed. As a result of that, ngView creates new scope,
reinstantiates the controller.
Well you can just save data from request on your global service. And in controller you can bind that data, so if you press submit from header that function should just refresh your data in service.
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
so I've written an app, there is a few routes:
1) one that shows chat messages, users list, etc and is kept up to date via the controller
2) game page
3) help page
it works fine, but when click the link for #/game-page, it actually disposes of the chat view, controller, etc. when I click the link for #/chat, it reloads it, but now has to reload all the views and data, which makes it slow and flickery..
I'd really like to just maybe hide the views for the pages that aren't active, so when I switch between them, its instant and everything is still there.
Can anyone recommend a way forward?
Thanks
The views are cached, so they are not reloaded. If you want data to persist between changing views then don't attach that data to the scopes of the views but to an outside scope or an object in an outside scope.
The views would still be compiled, though, every time you switch between them. If that's a concern then I suggest to use ngSwitch.
it's normal behaviour to reload the views and controllers for ngRoute.
probably for your case you could create your own router, catch rout param and hide/show needed bloc with ng-hide
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)