I am creating mobile chat app in angularjs.
It has lets say 100 userlist. If user presses on some userlist, it takes to next view(chat view). So, as user presses on userlist . I want to create a dynamic chat view of that user based on his userId.
One way of doing this is - I define the route like this 'chat/:userId'. Then access the userId. Also messages of particular user is coming from server. And new chat messages is appended to the view.
I have doubt that if user open the same view again it will load the basic template again because view is changed . It will again send the request to server again. It should not.
For clearing the question, In mobile jquery (http://iflychat.com/drupalchat/mobile-chat)
If user opens the view lets say public chatroom , It only takes load time once. If we again come back to this same view, it loads instantly. It creates the view based on url. Is this kind of functionality possible in angularjs?
Angular has an $http cache that could help you accomplish something similar:
$http.get(url, { cache: true}).success(...);
There are also a few other ways using the same cache.
Here is a very detailed post How to cache an http get service in angularjs
Thanks,
Paul
Related
I have an angular application with a page with a form inside. In that page there is also a link to an external website. In the external website the user does something and then is directed back to my page.
I would like the data the user initially adds to my page's form to be saved so that when the user comes back from the external website, he will find the initial page with all the information he inserted.
The only solution that comes to mind is cookies/localStorage. So for example I would have to save all the data in the localStorage, go to the external website, come back to my page, and load the data from the localStorage.
Is that the only way or is there a better solution?
Thank you!
Retrieving Data from route
You could set your desired data in the route and retrieve it in your Angular application.
For Example, you want to check whether or not your user has checked something once they have been redirected to the external website; all you need to do is set a query param and then check it once the user comes back to your original web application.
e.g.:
yourwebsite.com/home?hasSelected=true
And in your component, you can access it like below:
constructor(private readonly activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.param1 = this.activatedRoute.snapshot.paramMap.get('param1');
}
You can learn more about getting data from query params Here.
I'm developing a Angular App using Restangular with Web Services REST, but when I change between sessions several user the information have a delay to display information. for example a view CustomerDetail with Information of User1 but when I change a User2 then it show me information of User1 and later in n seconds show information correctly the user User2.
My question is, how to reload information correctly in view?
first of all, try reducing server calls by getting as much data at once and then create client side reload. regarding your case, when you click on some button to change users, first change a variable to "onLoad" to true and perform ng-show="onLoad" for some loading div and ng-show="!onLoad" for some other div contains users info. then when you get back your data flip "onLoad" value...
I am going to try to be as specific as I can. This is what I am trying to accomplish:
I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4 forms, one at a time.
My idea is to show a form, and once the user clicks 'Next', save that status and show the next form. After all forms have been filled, use those choices to fetch the API and return results to the User.
Here are my questions:
Where should I store the status of his choices? Cookie? Session?
How would I organize Angular in order to have all these forms that are shown one after the other? Any resources that I could use as an inspiration?
BTW, I am using Rails as a backend.
I have based my question on this tutorial: http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/
I see that he uses saveState() on submit, but I am not sure where that function is defined.
Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).
Create a service like
angular.factory('shoeSelectionState',function() {
var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
return states;
});
In your controller inject this service,
angular.controller('MyController', function(shoeSelectionState) {
$scope.states=shoeSelectionState;
});
and bind the states array to each form elements, something like
<input type='text' ng-model='states[0].selection.size' name='size'>
If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.
You could use localStorage as #sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:
Plnkr example of three pages and a model
Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.
I'm having a hard time figuring out how to do this,
Heres what I am trying to do:
I have a webpage containing statuses of users I've chose to follow(Something like facebook's statuses).
Now what am trying to do is to refresh the webpage automatically so that whenever a user changes his status I won't have to refresh the webpage to see it.
The status list is a Repeater located inside an UpdatePanel, it's data source is structure of List<User> I've created(there is no DB involved). Each user has an unique ID, name and status.
The users I follow is a List of strings containing the IDs of those users stored on the Session.
I have read countless articles about how to use a webservice and how to use javascript yet I remain clueless on how refresh the updatepanel's content automatically through the webservice.
Good example of using a timer (for an update panel) here:
http://msdn.microsoft.com/en-us/library/cc295400.aspx
Assuming you are using JQuery you can then call a webservice from this 'Timer_Tick()' method using the following:
JQuery & Timer :: Updating the text of a hyperlink from a webservice
I'm trying to use Backbone.js for my Django project and it's confusing. So to my understanding, I need tastypie for the RESTful API with Django to which I'm new, so for example I have a SongResource like follow :
class SongResource(ModelResource):
class Meta:
queryset = Song.objects.all()
authorization = Authorization()
All what this does is gets back a list of all the songs I have in the database, right? To my understanding, I should use this in the Backbone.js router to get all the songs, and then do all the data manipulation in my JS code instead of the Django's view?
So if I want to get all the songs that the logged-in user purchased, I should get all the songs from Django, and search for the user's songs in JS code?
Also, what if I want to save songs the user listened to for example, I'm used to do that by sending an Ajax request to a view where I save the action.
Another thing is, let's say I have five models in my Django app, should I create the give models in Backbone.js too?
So in Backbone.js, I just get the data from Django and manipulate them in the front end instead of the Django views as I'm used to?
If you can see my confusion please guide me to some articles, tutorials, videos whatever !
Thanks a lot
You definitely have to do the filtering on Django side :) I know nothing about tastypie, but as of current (logged in) user, you have that in django session, therefore you cannot rely on Meta.queryset, instead the queryset changes for every request. You probably need to override some view method.
As of saving listened songs, you first decide when to do that (start or end of song), and upon that event you save() some Listening (Backbone) model, that will trigger the XHR request (see Backbone.sync).
Yes, you should Backbone model counterparts for your Django models if you use them client side. Again, see Backbone.sync