I am new to angular and was wondering if I could somehow change states (after clicking on link from a list of search results) and load a new view, hide the old one (including header !), but not unload it/not have to request JSON data again if I got back to the search results for products view from the product details view.
Well, this will be a really short answer.
Take a look at this:
$templateCache You can play around with it so you won't need to reload pages when going back and forth.
Related
React router has very cool feature: if you have a list of items (Instagram for example) and if you click on one item, content opens in modal/overlay but if you copy-paste the link to new tab/window or share the link with a friend for example, it opens in its own page.
I would love to use this feature but I need to find a custom solution..
My posts are very data heavy
I've split posts data into 2 tables in database
1st is very lightweight containing essential data: 4-5 columns
2nd table is very heave, ~30 columns
When user uses search filter, list updates only with data from 1st table
If user clicks on post, it will open in a modal/overlay
I will recycle the data I already have (from 1st table) and also get rest of the data from 2nd table
However, when user shares the link or opens it in new tab/page, data from 1st table is not present. I would need to integrate a conditional logic:
If post opens in list view (modal/overlay), only get additinal 2nd table data
If it's opened in a new tab/window in its own page, get all the data, 1st table included
How could I integrate this with React router? Has anyone already tried it? This would also allow to use different layout/components when user opens item in page view. Is there a way to check it?
Or is there a flaw in my logic? I imagine list would update very fast because it doesn't require huge amount of data and also would modal/overlay because it recycles some of the data.
I read all the docs, also searched online - didn't find anything.
Modals in react router are great. I've used the pinterest example and adapted it to my own needs.
Ensure you do your check on state.modal===true in a master layout component to give you the modal styling.
you'll need to check if table 1 stuff is present in your state and dispatch an action to trigger the async call in componentDidMount. You should be fetching table 2 in all scenarios.
I have a searchfield that when used shows multiple results (search for Star Wars and you get about 6 results in a list form). Every result has a "add movie" button which when clicked should save the data of that movie into my rails model.
I want to use Backbone to get a dynamic view for this process, so that when the movie is added it shows instantly without refreshing. The easiest way to do this would be to extract the data from the HTML (title, image-url) from the selected movie and store it into my model.
I've checked the Backbone model documentation, and I've already did the codeschool Backbone.js course, but still I find it hard to get started. Can someone point me in the right direction?
OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/
i've the following hierarchy structure : Group -> Family -> products -> Product details.
each node is retrieve through an $http service.
i would like the user to be able to drill down until the final product details and i would also like no reloads when the user hits the back button as parents never changes.
i've succeeded to build the first part using routes and it works pefectly but now each time i want to go back the controller of the parent view (last view) is reloaded and i don't know how to avoid this reloading.
i am thinking of changing my way of doing it by having only 1 view (while 4 before) and manage the drill down through a directive, do you think it could be considered as a good practice ? how would you implement this ?
You could check out AngularUI Router, since one of its main feature is the ability to nest states & views.
Have a look at the UI-Router Demo, source code here.
I have a custom module in DNN 7 that has a data structure where items belong to categories (called "sections", not DNN taxonomy, just a simple list of section names). The module edit screens work so that on the view control you may click on an edit link on each category, which loads the category edit screen (passing the category id). This works great, and when you save I use Globals.NavigateURL() to return to the view screen. This all works as intended.
On each category edit screen I also have a list of the items within that category, each with an edit link. Clicking the edit link opens the item edit screen, passing the correct item id, and allowing me to edit that item. This all works great, until you save. The save works properly, but when I want to send the user back to the edit screen for the category it doesn't work. When I use:
Response.Redirect(EditUrl("SectionId", sectionid.ToString(), "EditSections"), true);
...nothing happens. It simply doesn't redirect anywhere. This is exactly the same URL I'm using to get to the category edit page in the first place:
EditUrl("SectionId", Eval("SectionId").ToString(), "EditSections")
And then I use a similar URL to get to the item edit page:
EditUrl("ItemId", Eval("ItemId").ToString(), "EditItems")
I don't understand why using the same URL to navigate to the same page I already navigated to would simply not do anything. For now I am sending them all the way back to the view, but it's painful if you need to add several items to the same category to have to navigate back into the category and add another item, only to be sent back to the view.
Anyone see anything like this before?
Have you tried to use the overload of NavigateUrl instead of EditUrl?
Globals.NavigateURL(TabId, "EditSections", "mid", ModuleId.ToString(), "SectionId", Eval("SectionId").ToString())
I haven't seen that myself but I would have to assume that somehow the context is being lost with EditURL and you're not getting sent to the proper location due to that.
I would suggest you try one of two things (or both).
Debug the URL that EditURL is returning and see if you can find the
difference.
Use NavigateURL for all your links and pass in MID=## for your
moduleid as a querystring parameter, to ensure that the proper
values are being passed.
UPDATE: If you're trying to have multiple edit views, and move between them, you might look at using a "loader" instead of having separate module definitions for the edit controls. Basically have a single Edit.ascx file defined, and it loads other ASCX files within it, injecting into a Panel. The View control on this module http://dnnsimplearticle.codeplex.com/ does that, but I haven't tried it with an edit control before.