Get Initial Data for a Page in angular - javascript

I have created a backend using Django REST and for handling API's at frontend I am using Angular (I have just started using angular).
I have one initial page let say User Profile Page So If user is authenticated I wants to show His profile on that initial page. All Authentication related thing is handled in API's So I am just getting response and redirection to profile page or login page is handled via Django.
I can get user related data in django and render that to HTMl page but in that case Angular functions cannot serve this django data.
So what will be the best way that whenever this profile page url is loaded an API call will be made that will fetch user data and angular can show that data in template and will be able to use it further ?
EDIT
let say you open this url -> /user-profile/ which refer to below View
class HomeView(TokenRequiredMixin, TemplateView):
"""
"""
template_name = 'portal/index.html'
mixin_failed_url = reverse_lazy('login-view')
It basically render to profile apge , here in this view I can fetch the user data and show them on HTML but angular will not be serve in this case.
One way to do this call any angular function using ng-init and load user data that will server the angular issue but its not the best way to do I guess.

Related

Tracking all server side actions on Angular Js UI

I need to show all server side REST actions on angular js UI in my application.
Like when the user is created, I need to show User is created/failed immediately on the panel on GUI.
I am saving all such actions in DB table(Recent Activity).I need to fetch data from DB table and show it on UI.
One way to design it get latest data from DB table(Recent Activity) on every action on the UI but for that, I need to make REST call on each action which is not very maintainable code.
What is the best way to design/implement above problem in angular js?
P.S. Application backend is implemented in Springboot
When you will create a user, you are going to hit a create User API and that API will return HTTP response.
So you can check if you get a success, just notify user a success message else failure message.
Hope this helps!

Handle page refresh/f5 angular js and laravel

I am building an application with angular js( new to angular js ) and laravel. All laravel routes except home page route serves only json data needed for that page. Home page loads all the necessary stuff that angular js has to work with. The problem is that if user decides to refresh the page when he/she is on a url other than home page, the page displays only json data, since there is no css,script and html loaded. My question is what is the best and professional way of handling page refresh/f5 with angular? Should i prevent the page refresh at all, if yes how? Hope my question is clear enough...
According to your post and comment here are 3 proposed solutions/suggestion.
Stay on one url and manage the json only,dont change your url it direct to your laravel route request if refreshed by user.
Using angularjs default hashtag(#) method is better, to understand angular and laravel.
Send a variable with your angularjs request to route to identify that it comes from angular and check in your route. If from angular return json otherwise you can redirect to home page.
I hope it will help

form component data from the web-api on every page

I have various page in my project and each page contain lots of drop down.
For getting options of drop-down from web-api and then i store this variable in angular service variable for further use in another view.
But i didn't get the way where should i call web-api to get drop-down data so that it doesn't matter which page should i open first or by default???
And i get options of drop-down every where.Currently i calling web-api in the controller which is correspond to my first view of application.
My approaches regarding this:
Method 1: I create a root controller in which i call angular service which call web-api to get data. The view is already render on view-port before get the the from web-api.
Method 2: i call angular service which call web-api in controller(not root controller which to specific to a view) and populate data in drop-down after successful callback from service so this working fine but it's not generic
Services/Factory are singleton, so I believe you should call the web api in your service rather than in controller and then passing the data to service.
EDIT -
If you are concern about the display of view before the data then you can use resolve as resolve can wait for data to become available before showing a view.

Ionic - Getting ID from previous page to update with new data on next page

I have some data from first page (or "Data Form" page) that needs to be loaded on next page (or "Add More Info" page) with same ID from first page before any controller is executed in my ionic application with sqlite database. In next page (or "Add More Info" page), I want add some new data to previous data with same ID before return again to first page.
You can check my flowchart below:
How can I achieve that?
You can check out my repo on github to fix this problem.
You have several options of that :
EASIEST BUT "dirty"
You can use $rootScope to store all you data and initialise them on each of controller.
Clean Solution parameters
You can define ui-router parameters for each of the variables you want to send.
See ui-router doc : https://github.com/angular-ui/ui-router/wiki/URL-Routing
using LocalStorage
For persistance, you can use localStorage. It is clean and won't impact your routing ruleS.
Better solution, using a service
See that explanation concerning data persistance and services :
https://stackoverflow.com/a/12574818/3687474
I'll personnaly go for the service solution that is scalable, portable and testable

backbone multiple views with the same model

I am doing an only front end project with backbone.
And at one point I want to do the following :
A basic form with some input
the user submit the form
Show some cool graph with d3 or google graph based on the inputs of the user.
The problem is that I don't have any backend so I never save the inputs of the user, How can I change the view and still have the data of the form?
I was thinking about storing it temporary into localstorage but it's not really a good solution for perfs...
Thanks
Router creates a model instance
Router passes that model instance to the form view constructor options
Router binds event listener view.on('formComplete', this.storeModel)
Router renders & attaches form view
User fills out form view
Form view sets the data from the form into the model
Form view triggers route or event (like this.emit('formComplete', this.model);)
Router's storeModel handler function takes the same model instance, stores it as this.model temporarily on the router, and then navigates to the graph view.
In the graph view route handler method, router passes this.model it to the graph view contsructor options, render, attach
This is sort of using your router as an in-memory data cache, but since you have no back end, you need to store data somewhere.
Im also doing an one view web app with backbone.
I think the point of your problem is you really has only one page but load different views into this page. Not change to another page.
I suppose your app url is http://xxx.xxx.xxx/#first_view. and use backbone Router to change views
If you just want keep the data until user refresh browser. Just save them into a Global js variable. Once you use something like
window.location = Global.getBaseURL() + "#second_view" to change your view. And you actually load the "second_view" by ajax and put html into current page. You never lose your js variable.
If you want keep data even user refresh or go to another page. You have to use sessionStorage. Save data into JSON format and convert them back to js variable once you finish loading the new page.

Categories