I read the ui-router docs but I didn't understand what is the different between nested views and nested states and how its related to scope inheritance.
Thank!
One state may have few views. Your app may be in one one state at the moment. But display many views at the moment.
So to me views is a sort of children of states if to put it into simple words.
Related
I'm a little bit confused about it.
I created an app with posts and comments.
Context API with posts works fine, because there is only one list of posts, which is stored in post-state inside of post-context.
But each post has different comments (and amount of posts can change dynamically), so there have to be different states for comments for each post. So I met some troubles (probably it was that changing comment for one post made the same change everywhere, so I have the same comments for each post) with using context. So I stored state in component without context (so that every instance has it's own state). That works, but a consequence - a lot of prop drilling needed.
So - can context be reusable with the same state, but different values of states for each child?
Context can be reused as much as you render a Provider component, however only the Provider children will be able to access the data and in case you nest the same Context, only the nearest parent Provider will be accessible to your components
I do not think using a CommentContext for each post is the right solution to your problem.
If you want to keep it simple and stay on Context api, I would suggest you to create a CommentContext that track comments of all pages.
So your CommentContext would have a state that looks like
type CommentContextState = {
[pageId: string]: Comment[]
}
Else you can have a look at state management library like redux-toolkit
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
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.
Can a cakephp component use a view? if yes then please explain how?
Components in CakePHP do not use views.
You can use component methods in controller actions, and those actions can have views, though.
M - models, behaviors
V - views, elements, helpers
C - controllers, components
things from one group should not be used in the other.