I'm working on my first project in Ionic Framework. The app is using ui-router for state management and ion-side-menu for navigation. Even though states and navigation have been really smooth, I'm having trouble understanding transitions between states and the back button.
Scenario 1: The side menu has a list of the main states in the app and the user can navigate by tapping on them. When they do so and the transition ends successfully, I don't want the back button to appear at the top left instead of the side menu toggle. I want to see the toggle and the side menu again.
Scenario 2: When the user submits a post, I want the user to transition into the 'My Posts' state with the newly created post at the top (I already achieved this resolve in the state). So after the post is submitted I have: $state.go('app.myposts.list'); When the 'My Posts' is rendered, I see the back button at the top again, but I want the user to see the menu toggle.
I read the docs on both side-menu and ui-router, and $ionicHistory but I haven't been able to find the answer for what the true logic of this is. Can anyone help me?
Thanks in advance!
Related
Hello all I created simple vuejs app and deployed to Heroku. Here is url of app:
https://vueappblog.herokuapp.com/. I'm trying to achieve when user clicks any number in pagination (or next button) to back that user to top of the posts list. See image below:
Can anybody help me?
You can scroll the page to the top after every click using
window.scrollTo(0,0); method.
chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability
I have a web application that uses ReactJS to handle client side navigation between the pages on the Nav bar. What I want to do next is set up an area of one of these pages in order that it can perform its own navigation and routing that is local to it's own area. Think of this page area as a kind of container for a game type app. My question is what would be the best approach for this? a) have all the navigation within that container handled by manual manipulation of id selectors or b) somehow leverage ReactJS routing just for this enclosed area.
If the answer is (b) I'd appreciate some guidance from all you ReactJS/front end gurus out there who don't mind helping a newbie out.
I've attached an image that hopefully depicts what I'm trying to achieve.
To reiterate: as the user clicks either left or right buttons the contents of the 'content frame' are changed accordingly. My question is if this is a valid use case for react router or would I be better off doing this by manual component rendering?
Page navigation
Cheers
So I've been going round and round trying to figure out the best way to have a footer that has a hidden panel for actions that slides up. The site is pretty basic, it has a header, content area and footer. I made a simple wireframe to explain this a bit easier:
So ideally the content panel are say something like posts, when clicked I would like to open the Secondary actions panel with the edit form prepopulated with the data from the content panel. If the Icon is clicked I would like to pop that same Secondary actions panel with a blank add new post form. Where I struggle with this is the convention of how to do this and what is the best via AngularJS. The secondary actions panel and footer are wrapped within a FooterController, but the content panels are wrapped inside a separate controller. I'm not sure whether I should be using a directive or a service.
I'm currently utilizing angular-ui-router but this doesn't manage the ui events that I need to happen.
Any advice would be greatly appreciated, I'm very knew to AngularJS so I'm trying to learn the right way of doing things with AngularJS rather than just building some hacked up crap that I'll end up scrapping later on!
Thanks!
I think secondary panel should have its own ui-view (with its own controller) instead of staying inside the footer.
For it to know which item has been clicked, you can pass through the ui-router state.
Let's say your control panel has post id 1234, then it should have a ui-sref="stateName({postId: post.id})"
And this state in ui-router will specify which controller/template it should fire, and inside that controller you can get the id from $stateParams.postId
You can then use the post id to get the post either remotely or from service if you have stored them earlier.
I have a link which has two actions. When I click on it, it opens a modal box via "ng-click", but it also transitions state via its "ng-href".
The modal box opening is intended. The state transition is not. However I need the URL in that state transition to persist.
When I try to use $locationChangeStart to prevent the state change, it also prevents the URL from changing. This is not preferable. I've also researched a bit, and found potential solutions in "reloadOnSearch". However it doesn't possible to point to a particular link. Not all of the links on the page do this, the other links are all normal links. Furthermore I don't know how to use reloadOnSearch with ui-router.
The feature I'm trying to implement is similar to Pinterest's overlay of items. When you click on the item, they open up a modal box and change the URL, but the underlying page doesn't change. This allows the end user to copy the URL and share it with their friends, and when they access it, it will actually go directly the item page and not the overlay.
I'm currently using ui-router if that makes anything easier.
Hopefully somebody has a solution?
You can try angular ui bootstrap modal for better integration with angularJS.
Take a look at an example in http://angular-ui.github.io/bootstrap/
Or you may open a modal via data-target="#abc" instead of href="#abc"