Scenario:
When user requests the page, some information is fetched from Database and needs to be populated in AngularJs Model (properties) on Page Load.
My AngularJS reside in a separate JS file and the fetched information(in JSON format) can only be rendered in view.
How can I load the fetched JSON information in AngualarJs properties. The values needs to be updated as soon as page is rendered, so I was considering Constructor; but don't know any way to accomplish it.
I create a method, say '$scope.loadConstructor()' and called it in my AngularJs code.
Related
I have an angular app that uses $resource to load data into the views. I used ngAnimate's ng-animate-ref to transition an image from one view to another. This worked fine when the data was hardcoded into the controller, but when I use $resource or $http, the data takes a little longer to load and therefore there is no identifier in the ng-animate-ref directive to help link the two images together. I figure I need to do either one of two things:
Don't let the new view render until the content has loaded
or
Ensure the data from the previous load is cached and available instantly
Is this possible to do? I can provide a plunker if it's necessary.
I have several pages that contain tables, I want to make a table directive so that code is reusable and easy to manage and place into other tables.
I need a way to get a JSON file using angular's $http service that is specific to that page. I have been able to use that service for retrieving an absolute JSON location, but i dont know how to go about retrieving one that is dynamic to the page the table directive is located in.
Example: The page is called goals, the JSON file accessed would be /app_data/goals.json and it is then populated into a table that is a directive in an Angular app.
If the page was called location, the JSON file accessed would be app_data/location.json.
What method should I be looking at in Angular?
Try looking the get method for the $http service.
A basic usage:
$http.get("path_to_your_json_file").then(onComplete, onError);
The problem:
AngularJS forces to split view from model and it's good. But we're experiencing the following downsides because of it: When a user loads our page a browser makes not 1, but 2 requests:
First it loads view template (the first request)
Then Angular services load data from a server (the second request)
And we have a bit slower load page speed.
The question:
Is it possible after first page loading load view with populated data and only then get data from a server when something must be changed on the page?
I tried to find something regarding it, but didn't find anything.
You will have a lot more request as you have to load the Javascript and CSS libraries as well.
You can store your initial data in a service or the rootscope and just update the data when you need it. What's exactly your problem here?
The modular approach would be to break all the different components of the page that consume data into separate data requests, so that the interface can load in progressively as different data requests complete.
Additionally, you can load initial data, but then make some predictions on what the user will do next and lazy load additional data in the background.
Finally, you could store the previously loaded data in local storage (lots of modules out there you can utilize) so that it's pulled instantly upon the user's next visit. You would want to want to also add some sort of timestamp comparison on data in storage and on server to see if it has been updated.
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
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.