In my app, i have no.of pages. each pages have a separate view for them. But in the header part i need to show the user name on all views rendering.. what would be the best practice for that..
i came across with some of options saying..
1. render the header view even before the router starts
2. use the routers '*' - notation to call the header view always.
3. keep the header view as a sub view of all page views - and keep call header view on all page view..
what would be the correct way...please any one suggest me the best way.
Have a layout view that contains the header and gets rendered only once. Then just render the interior portion of the document as you navigate. Changing the URL and triggering a new route does not always imply the entire DOM needs to re-render. Keep your DOM changes as small as possible. Also study the idea of nested views like you get with Backbone.Marionette for another approach.
Related
I need to transfer data from an API from one page to another, I've tried various different methods and this is what I currently have, but it doesn't work, obviously I have a button created as well - Any other ideas inside of reactjs?
const navigate = useNavigate();
const onClick = () => navigate(/pageIGoTo/${variable.id});
One option that works well, and is easy to inplement, is to include a ViewModel object in the Props object when creating views. See this code of mine for an example.
Use of shared objects within view models enables view 1 to update data and for view 2 to then have access to the same data immediately. Note that React may recreate views frequently, but this does not affect view models.
If you want view 2 to refresh immediately, then you will need an event based mechanism. Eg view 1 raises an event, view 2 receives it and updates its state. See the use of these events in my app for an example.
I have a project which contains (among other things) a list view of events, and then of course a unique page showing these events individually, you can easily understand there are two distinct path : /events/ and /events/:id
I added some filtering on events, and of course when I filter the list, and then click a specific event to see it, and then go back to the events list, it of course, forget about my filter.
Should I use Contexts or is there a specific way I didnt hear about ?
I also thought about having different path for all the filters (ie : /events/filter_type_1 etc etc with filter_type_1 being something human readable.)
What would be the more logical way ?
Yes and no there 3 ways to solve this:
Store state in higher component
instead of storing state in your overviewView component. store it in the component above that does the routing. this way it wont get lost on navigation. (i dont like this approach).
Persist state
You could persist the state to the localStorage and read this state when your component mounts. this way when you come back your state will have persisted.
localStorage.getItem("overviewCompnent_filter");
localStorage.setItem("overviewCompnent_filter",yourData);
Externalize state
There are state libraries that help you put top level application state outside of react components like: mobx (my favorite) and redux. These libraries use the context api underneath to deliver the right state/values to your component and you can let them make it inject them as props in your component (so it's like the first option but a cleaner solution).
This way you can keep all your top level state together and not have to give it all the way down your component tree.
I have an Angular application with uiRouter and some data that I want to display using Angular-Chart.js.
I have different filters that can be applied to this data. I also want to have a URL that represents the state with all applied filters, i.e. /:groupId/:dateStart/:dateEnd
Right now I have a state with parameters, and two views (controller+template) - one for displaying data and one for displaying filters. In the filterController, I have a function that is called when the filter is changed, and that function simply calls $state.go("Controller", newFilterParams);
That approach works, however, that fully reloads the controller for the data, and I want to prevent it and animate the data change. But I also want to preserve the URL representation.
Is that possible? What would be the best practice to implement data filtering in Angular and uiRouter?
One of the main reasons to use ui-view is listed as having multiple views:
main page
- header
- content
- footer
*other page*
- header
- content
- footer
However, views appear to be tied to states. If I have a header state, I cannot include it in a list detail state with <div ui-view='header'> because header is not a view in list detail.
I am not interested in a hacky answer, as this appears to be the major benefit of ui-router (eg http://www.funnyant.com/angularjs-ui-router/). If I can't get this to work in a clean way, I will go back to the default angular router.
What I have tried
I thought that possibly I would need to access a view in another state to make this work, but google is returning nothing for this.
This solution requires a seperate layout state and that every state be prefixed with root, which seems clunky. If this is an advertised selling point is there no better way to do this?
Multiple Named Views docs relies on all the views being defined for that specific state.
This similar question is answered with "use ng-include".
Another question on how to create a layout state is the closest to what I want, but requires a hacky root scope and that each child scope redefine a container# view.
It looks like you want to have a state with multiple views that is a child of an abstract state.
Abstract states are described here (https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states). You are interested in the example "To insert a template with its own ui-view(s) that its child states will populate."
Note that an abstract state can't be instantiated by itself. It is only used when one of its child states are used. In this case you may have only one child state with multiple views for the abstract state.
I'm trying to get one thing to show when the user visits
mysite.com/projects
and another thing to show when they visit
mysite.com/projects/project
However, despite following the tutorial in the official documentation, my set up won't work.
Does anyone see where I'm going wrong? I've looked at everything and compared character for character with the official docs.
See my Plunkr
You are mixing concepts in your states. In some places you are referencing /project as it's own state, in others you are trying to reference it as a child state of /projects.
You can only use projects.project when you are embedding the contents of the child within the template of the parent.
I created two forks of your Plunkr, showing both independent routes and parent/child routes.
Note in the parent/child route, there is an additional <div ui-view></div> in the parent template.
Singular routes: http://plnkr.co/edit/jIMcdTuifE8oRpg83vtN?p=preview.
Parent/child: http://plnkr.co/edit/A85svCnngB7x4PJCUUf9?p=preview
You have two problems in your exemple.
First, your link to the projects.project state is incorrect. You need to put the full name of the state in the ui-sref attribute, so projects.project.
Next, your trying to use nested state. When navigating to the projects.project state, the projects.project state will not replace the projects state. In fact, the projects state will host the child state. So you need to add the ui-view directive inside your projects template (the r1.html file).
Here is a functionnal Plunkr: http://plnkr.co/edit/LyBM4QiKiw8sAoI0jiKo