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.
Related
In my Angular SPA, there's some data loaded from the backend that is used throughout the application. This data doesn't change while the app is in use, so to keep things slick for the users I'd like to only load this data once. I can see two possible solutions here:
Load the data when the app is first initialised and attaching it to $rootScope using angular.module.run()
or
The first controller to need the data loads it, and then puts it... somewhere... where everything else can get to it.
Which approach is the "most Angular" way to do this, and how would I start to implement it? Most of the questions on SO seem to be about loading data with the controller rather than when the app itself starts. I'm using 1.4.7 with UI Router if that makes a difference.
You could implement a service which has been sugested by others and ALSO make the service load the data in a lazy way. (Lazy loading pattern described here: https://en.wikipedia.org/wiki/Lazy_loading)
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.
In our case, we have a search function in our application which shows the search results after entering a search term. The search results are products in our case. When we click on one of these products we are send to the page with information regarding this product. Now our problem, when we want to go back to the search page we want a method to return to the exact same page as before we left the search page. And not an entirely new search page.
We have divided our HTML in 3 views, which we load with the UIRouter.
We need to share data between the header, content and footer. When we show our search results, we want to show the amount of results in the header for example.
In short; we need to share our data between controllers / views. What will be the best solution?
We have thought about:
Adding a mainController to the body and using this as a medium to communicate data between controllers..
Store all data in a factory and access this factory direct from all controllers. But will all views be updated directly on data change? (2 way binding?)
However, we didn't get it working yet. What would be the best way to manage this?
As mertins mentioned in his comment, a service would do fine for this purpose.
Inject that service to all relevant controllers and indeed, thanks to 2-way binding all relevant data will be updated properly.
Don't use a controller, that's not what they are meant for!
If you need a code example for the service injection comment and I'll update this answer.
I've started to learn AngularJS but I need some application design hints. Of course I'm not asking about the layout but ... how to design my application and it's controllers in a proper way. I have left sidebar with a menu that is loaded from the web using JSON. That needs a controller. That's fine. It works for me. There's a content box as well in a center of my page that loads some data dynamically. In my opinion it requires another controller.
And now comes my solution, that somehow doesn't look good IMHO. When I click a menu item in my sidebar I'm loading a content. Then I'm passing this data into a Service which emits an Event afterwards to the Second controller (which is responsible for controlling my content in a center of my page). When it receives this event it simply gets previously loaded data from the Service and displays it. It generally works.... but ... I'm pretty sure that's not the proper way of doing this.
I would be grateful for any hints. AngularJS has a really poor documentation and tutorial :(
cheers
EDIT:
OK. That's my basic application using JQuery:
http://greatanubis-motoscore.rhcloud.com/index
And that's the same application I'm converting into AngularJS:
http://greatanubis-motoscore.rhcloud.com/angular/index
No worries, some text is in Polish but... I think it really doesn't matter ;)
Note for the AngularJS version: At the moment the content is a HTML but finally it will load JSON data as the other controllers.
I would go about doing this with angular ui-router. With ui-router you can achieve this in a couple of ways. You can use nested routing to have a base state (Your sidebar menu, header etc.) which will act as your shell page, this can have its own controller as well. You could then define each of those other views as child states of the base state. These child states can also have their own controller/views as well, but they will be sitting inside the base state (both visually, and also inherit $scope properties of the base state) optionally they can have separated URLs themselves, but they don't have to, you can just change states without changing the url, by leaving the URL bit empty when you define different states in your $stateProvider configs. Another way would be to use the multiple named views feature.
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.