Is there any way to only execute a function in the controller on the page refresh instead of going the another ng-view?
I got a view with items in a list. When I click on one of the items it goes to a detail page where I pass the data to a service and get it back on the detail page, so I dont have to call another $http request for getting the single item data.
This works, but when I hit f5 I want to execute a function to execute a $http request to get the item data. When I hit f5, of course the data isn't in the service anymore.
Thanks in advance!
The solution to this is that in your route / path / url, you need to add the ID or unique property that identifies the item whose detail that you are checking out.
So, let us say that you are on the path /template/items.
When the user selects item 2, you then change the path to /template/item/2.
In your $routeProvider have the route defined as:
$routeProvider.when('/template/item/:itemId', {..});
The itemId will provide the ID associated with the item.
In the controller, using $routeParams you can then read this ID using $routeParams.itemId.
Query your service and see if it has details of this item with it. If not, then proceed with the $http request.
That way, even if you refresh your screen, the Item ID is still present in the url from which your controller can retrieve it and carry out the appropriate action.
Related
Good Morning. I have a question how to pass multiple params from one controller to another contorller without using location.path and also the id values won't show on url.when i using service setter and getter , id values were gone when refreshed the page.can you please some idea how to stop showing the param values on url and pass to next controller in Angular js 1.x
If an user is coming from an specific page i need to do get some values out of a cookie and change what the users sees.
Now, the issue is that i cannot find a way to view what page the user is coming from.
EDIT: This is intended to capture when the users clicks back in a page and save the state of the previous page.
Any ideas?
Thanks in advance
Solved. Every time i load a page i'm saving the url, so when i get to this page i just have to read it to tell. Thanks!
You can use browser history in our javascript or you can write your last page in cookies and get the last link then update it
Using cookies will indeed fix this for you. So when a user goes to a new page - set a cookie like:
app.controller('myController',['$scope', '$location', $cookies], function($scope, $location, $cookies){
if($cookies.get('page') == '/index'){
//do stuff if user came from index
}
$scope.pageChanged = function(value){
$cookies.put('page', value);
$location.path('/index');
}
}
just make sure you use the pageChanged function to set your page every time user changes pages.
Using the $routeProvider you can use the resolve function to detect when a new route has been loaded.
Another way would be to listen for the event $routeChangeSuccessor $routeChangeError and get the information needed from the service $location or $route.
If you want a sample just ask me, I'll try to post one as soon as I have free time.
How can I have an index page accept search input and then return the result in different page (view) with angularjs?
All the tutorials I have gone through on the internet shows search box that accepts the query and instantly prints results beneath it on the same page (or say "view" in MVC language?). I want a separate page to just hold the search box, let user type what it wants and then hit go button which then return results on a separate page (which does not have the search box).
You need to store the search box value somewhere before going to the second page. You can do this in several ways.
One way would be to use a service to store the value, then the result page can retrieve it from there.
The service:
.service('CommonService', function(){
this.value = '';
});
The search controller:
.controller('search', function(CommonService){
$scope.goToResult = function(searchBoxValue){
CommonService.value = searchBoxValue;
// Redirect to result view
};
});
This function could be on the ng-submit of the search form.
The result controller:
.controller('result', function(CommonService){
// Receive value of search box
$scope.receivedValue = CommonService.value;
});
Another way would be to send the value along the URL, like GET params:
http://google.com/q?SearchBoxValue=something-i-wrote-before
are you implementing single page application (SPA)? you can do this multiple way with partial view and override partial view on search page with result page.
search page (partial) hit send request to get data.
receive data from service
redirect to result (partial view).
you done.
hope this help you.
I'm new to angular and trying to figure out how best to accomplish this.
Say you have set up an ngResource factory to get a bunch of widgets . You return those widgets(GET /api/widgets) and display them on the page in a list.
Now say you can edit those widgets in a dialog box by clicking an edit button next to the object in the list. Is it better practice to pass the individual widget's data (that was already retrieved by the first $resource call) to the edit dialog, or simply pass an ID parameter to the dialog box and have it resolve it's own $resource call using a separate GET /api/widgets/:widgetID call.
The data wouldn't realistically change between loading the list and clicking the edit button, so it doesn't need to be synced to the exact second. Both of these requests would come from the same factory, but the question is if you should store the data and pass it, or execute a separate request.
I don't see a reason to fetch it again, I would just reuse the object.
I am new to Angular.js and i am facing problem in maintaining the JSON feed values in the view.
I am using different routers and when i launch the app it loads the home.html which in turns calls the homeCtrl and make an HTTP call and binds the data using ng-repeat ( in home.html ). If user clicks on the list item to brings them to detail.html ( kind of detail page ).
Now the problem i face is , on the detail page when user tabs the back button - the app goes to home.html and the homeCtrl again hits the webservice and bind the whole data once again. Which i feel is unwanted as the JSON datas was already collected on the 1st time page load itself.
How can i preserve the old data when user move back forth between different views so i no need to hit same call over and over.
Thanks and sorry if its really basic stuff.
How can i preserve the old data when user move back forth between
different views so i no need to hit same call over and over.
If you use the $http service to make the requests use the cache: true option to use the default angular cache as explained in the docs: https://docs.angularjs.org/api/ng/service/$http#caching
Here an example:
$http.get(url, { cache: true}).then(...);
You can also define your custom cache object through the $cacheFactory service: https://docs.angularjs.org/api/ng/service/$cacheFactory
If you want some more complete with expiration, size limit and other cool stuff try angular-cache: https://github.com/jmdobry/angular-cache
Hi I think that you need is create a factory or service;so in this way the controllers shared data between them.
Here's an example