form component data from the web-api on every page - javascript

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.

Related

Laravel AJAX call not working after reloading view?

I have a standard CRUD web app in Laravel that allows users to view and edit records. It also has a sorting mechanism that asynchronously (using AJAX) sorts the main records view.
This works fine until the user clicks on a record in the records view to edit it. Then they are redirected through the web router to a new Controller function that loads the update view for that record. When they click to save the SAME update function used to load the update view is fired a second time, and it updates the record and returns the ORIGINAL records view.
The problem is, the AJAX sort function for the records view only works BEFORE the update function is called. I've compared the HTML and JavaScript before and after a record is updated and it is IDENTICAL. So why does the AJAX function stop working?
My only guess is it has something to do with the web router. Predictably, the original read view is called with a GET method, and the update function uses POST, but I tried changing the "type" property in AJAX to POST with no luck.
Try adding _method=POST to your post data
Also do not forget to send csrf-token (axios does it automatically)

AngularJS - Retrieving Data for Multiple Widgets in a Single AJAX Call

I have an architectural question about data retrieval for multiple widgets.
I am building a large javascript application (a mini-SPA) with AngularJS. I want to create a very modular Dashboard application with interactive widgets that the user can choose to include, exclude or reposition in the containers of the layout system. The user can interact with each widget, causing an individual refresh of it’s data and more. Each widget will be displaying very different data from other widgets.
So far architecturally, each widget will be represented by these AngularJS components:
a partial view template (to show the user the data)
a controller (to implement widget behavior and handle the success callback of the corresponding service)
a service (to retrieve data with $http and return a promise object to the calling controller)
Thus each widget has the ability to pull it’s own data through an Angular Service calling a particular endpoint.
Now, when the user arrives on the Dashboard Page containing possibly 5 widgets, I don’t want to make 5 individual parallel AJAX calls to 5 different server endpoints. That wouldn't be efficient; I'd like to reduce parallel requests to the server.
Instead, on arrival to the page, I’d rather make a single AJAX call by calling an endpoint that has aggregated all the data of the 5 widgets.
QUESTION: Supposing that the server can bundle/merge all the data from the 5 widgets in 1 JSON payload in a clever wrapper, then in the AngularJS application, how would I retrieve and distribute that data to the 5 widget controllers, so that they can initialize themselves with the fresh server data?
Of course, I’d want to retain the ability for any single widget to refresh only themselves. Though behavior beyond arriving on the Dashboard page isn’t what I’m asking about in this question.
Maybe there are articles out there that talk about this, but I haven’t found one yet.
I have already thought of one architectural idea that I think is ‘good’, but I wonder if there are better solutions.
Possibility) In addition to the 5 Angular Services to make AJAX calls, introduce a 6th called WidgetAggregateService. When it’s retrieveAllAndBroadcast() method is executed, this service would handle the success callback itself and then publish the payload to the 5 controllers using $rootScope.$emit(). Thus the WidgetAggregateService would be using the Mediator Pattern (or PubSub Pattern) on $rootScope that the 5 controllers can subscribe to with $rootScope.$on(). Each widget's controller can grab the relevant information in the aggregate data payload.
My team and I came up with a solution…
API Contract
We have a developed a API contract that allows us to make requests to the server for 1 or more widgets (including passing relevant request arguments) that will return 1 or more widget responses in a JSON wrapper. Thus we can do retrievals in these ways:
Single Widget Retrieval
Multiple (Aggregate) Widget Retrieval - We are requesting data for 2 or more widgets at a time.
in a single call to the server.
Deliver Data to Widget Controllers from an Aggregated Retrieval
1) Aggregated Retrieval: We have an AngualrJS “page” controller that is responsible for making the aggregated retrieval for all the widgets on the page upon page load. It makes the request for all 5 widgets on the page by delegating the AJAX request to an Ng factory to handle data retrieval—we’ll call that “PageResourceFactory”.
2) Forward to Individual Widget ResourceFactories: Upon successfully getting data back the “PageResourceFactory”, it calls another factory helper to forward the relevant responses to the individual widget resource factories calling their set methods. Thus at this point, all 5 widget resource factories have their data set.
3) Widget Controllers Subscribe to New Data: During page initialization each widget controller has already setup a subscription to their own resource factories to essentially listen for when new data has been set (via their resource factory set methods). THUS, the controllers can know when the data has changed (whether or not they the widget controller initiated a retrieval or not).
4) Widget Controllers Bind Data: Each widget controller is ‘notified’ of a data change, and thus can respond accordingly by putting it on the scope to bind to the view.
Single Retrieval
This works just a standard AJAX retrieval.
1) Controller makes request via a resource factory.
2) The resource factory with the aid of $http performs the AJAX request and passes the promise object back up the the controller.
3) The controller takes the data (after a successful promise call) and binds it for the view to display.
This is the way we approached the problem. I'm sure there are other possibilities.

$rootScope is lost after refresh

I have a data-binding to $rootScope.someArray in my someData.view.html. I have written a Data service to load data and populate $rootScope.someArray and have called that service in my App's "run" method. Now If I am on the someData.view.html page and hit refresh(F5) all the data vanishes. Although if I go to home again and navigate to this html page, every thing comes back.
When I put a debug point on the place in DataService code where $rootScope.someArray is being populated, I can see data getting fetched from the backend but somehow it's lost.
Basically angular won't have the data on refresh. If you want retain you data, you need to use,
session service or local storage service based on your need (Don't forget to clear on log out).
But Putting all the data in local storage services or putting sensitive data in the local storage services is not advisable. So you need to call the Back end method and assign the data to the variable in the controller init (call using ng-init).
Note : Don't dump your array of data in RootScope. AngularJs team
itself suggesting that not to use. Instead of this use Angular
Services (not Factory) and make use this services where ever you want.

Preserve data AngularJS after refreshing

This is my situation: I have a web application, frontend written in AngularJS/HTML.
For the moment, I have 2 views (2 different HTML - pages).
I enter in the first view a serial number, which is passed on from the first controller to the controller of the 2nd view with the help of a service.
At the second view, I display some json-data, obtained from a Django API endpoint. When I refresh the page, this data is gone and the fields are empty...
In my case, this is not so user friendly, so I want to preserve the data (or serial number I pass on in the controller) to retrieve back the data or serial number after refreshing. Because after refreshing, the variable (the serial number) will be null in my service, so the json call will fail.
I've red many things on the internet already, but nothing is actually working for me. Does anyone have an idea?
If your second view is dependent on a value, this value could be the param for your view url, instead of sharing it through service. Pass on the param using either angular ui-router or built in ngRoute.
Here are helpful links:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://docs.angularjs.org/api/ngRoute/service/$routeParams
You can use the $cookieStore service in angular and store the value in a cookie in the first controller, and get the value in the second controller.
$cookieStore.put("key", "value");
In, the second controller do,
$cookieStore.get("key");

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